title: How to map using i18next json in react
body: <p>First of all, ㅔlease understand that you use a translator because you are not proficient in English.</p>
  <p>How to render static i18next json file for multilingual support in react?</p>
  <p>using: <em>react, Typescript, Styled-components, i18next</em></p>
  <hr />
  <h2>Translation json file used in i18next</h2>
  <pre><code>{
      &quot;miniTitle&quot;:&quot;MiniTitle&quot;,
      &quot;title&quot;:&quot;Title&quot;,
      &quot;text&quot;: &quot;Text&quot;,
      &quot;version&quot;:[
          {
              &quot;name&quot;: &quot;v1&quot;,
              &quot;sensor&quot;: [&quot;A&quot;, &quot;B&quot;, &quot;C&quot;, &quot;D&quot;, &quot;E&quot;],
              &quot;src&quot;:&quot;../dist/img/product.jpg&quot;
          },
          {
              &quot;name&quot;: &quot;v2&quot;,
              &quot;sensor&quot;: [&quot;A&quot;, &quot;B&quot;, &quot;C&quot;, &quot;D&quot;, &quot;F&quot;, &quot;G&quot;, &quot;H&quot;],
              &quot;src&quot;:&quot;../dist/img/product2.jpg&quot;
          }
      ]
  }
  </code></pre>
  <hr />
  <pre><code>import * as React from 'react';
  import { MwsCard } from '@Components/index';
  import { useTranslation } from 'react-i18next';
  import { Wrap, Container, TitleH5, TitleH2, TextP1, CardContainer } from './ProductWsStyle';
  
  function ProductWs() {
    const [t] = useTranslation('productWsDB');
    const TransDB = [
      {
        name: t('version.0.name'),
        sensor: [t('version.0.sensor')],
        src: t('version.0.src'),
      },
      {
        name: t('version.1.name'),
        sensor: [t('version.1.sensor')],
        src: t('version.1.src'),
      },
    ];
    return (
      &lt;Wrap&gt;
        &lt;Container&gt;
          &lt;TitleH5&gt;{t('miniTitle')}&lt;/TitleH5&gt;
          &lt;TitleH2&gt;{t('title')}&lt;/TitleH2&gt;
          &lt;TextP1&gt;{t('text')}&lt;/TextP1&gt;
          &lt;CardContainer&gt;
            {TransDB.map(item =&gt; (
              &lt;MwsCard key={item.name} name={item.name} sensor={item.sensor} src={item.src} /&gt;
            ))}
          &lt;/CardContainer&gt;
        &lt;/Container&gt;
      &lt;/Wrap&gt;
    );
  }
  
  export default ProductWs;
  </code></pre>
  <p>I think declaring TransDB and writing t() in it is very inefficient. Also, static keystrokes like version.1.name are not cool.</p>
  <hr />
  <pre><code>import * as React from 'react';
  import { Container, Img, Info, Spec, Title } from './MwsCardStyle';
  import { Version } from './MwsProdDBType';
  
  function MwsCard({ name, sensor, src }: Version) {
    return (
      &lt;Container&gt;
        &lt;Img src={src} alt={name} /&gt;
        &lt;Info&gt;
          &lt;Title&gt;{name}&lt;/Title&gt;
          {sensor.map(item =&gt; (
            &lt;Spec key={item}&gt;{item}&lt;/Spec&gt;
          ))}
        &lt;/Info&gt;
      &lt;/Container&gt;
    );
  }
  
  export default MwsCard;
  </code></pre>
  <p>The following error occurs in the sensor.map() section:
  Uncaught Error: Objects are not valid as a React child (found: object with keys {name, sensor, src}). If you meant to render a collection of children, use an array instead.</p>
  <p>Except for the above errors, other parts are rendered and translated normally.</p>
  <h2>I want to know how to solve the error and write a more efficient code.</h2>