title: React not displaying data in table row
body: <p>I am a beginner to React and frontend development in general.
  Here is a "simple" code to display a table.</p>
  
  <pre><code>function TableHeader() { 
      return (
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Job&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      );
    }
  
  
  function TableDataRow(row, index) {
      return (
          &lt;tr key={index}&gt;
              &lt;td&gt;{row.name}&lt;/td&gt;
              &lt;td&gt;{row.job}&lt;/td&gt;
          &lt;/tr&gt;
      )
  }
  
  
  function TableBody(props) { 
      const characterData = props.characterData;
      return (
          &lt;tbody&gt;
              {characterData.map((row, index) =&gt; &lt;TableDataRow row={row} index={index}/&gt;)}
          &lt;/tbody&gt;
      );
    }
  
  
  
  class Table extends Component {
      render() {
          const { characterData } = this.props;
  
          return (
              &lt;table&gt;
                  &lt;TableHeader /&gt;
                  &lt;TableBody characterData={characterData} /&gt;
              &lt;/table&gt;
          );
      }
  }
  
  class App extends Component {
    render() {
      const characters = [
        {
            'name': 'Charlie',
            'job': 'Janitor'
        },
        {
            'name': 'Mac',
            'job': 'Bouncer'
        },
        {
            'name': 'Dee',
            'job': 'Aspring actress'
        },
        {
            'name': 'Dennis',
            'job': 'Bartender'
        }
    ];
  
    return (
      &lt;div className="container"&gt;
         &lt;Table characterData={characters} /&gt;
      &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The error is as follows:</p>
  
  <blockquote>
    <p>Warning: Each child in a list should have a unique "key" prop.</p>
    
    <p>Check the render method of <code>TableBody</code>. See
    <a href="https://banned-fb.example.com/react-warning-keys" rel="nofollow noreferrer">https://banned-fb.example.com/react-warning-keys</a> for more information.
        in TableDataRow (at Table.js:30)
        in TableBody (at Table.js:44)
        in table (at Table.js:42)
        in Table (at App.js:28)
        in div (at App.js:27)
        in App (at src/index.js:6)</p>
  </blockquote>
  
  <p>The data rows are empty in the table. I think there is an issue in the call to <em>TableDataRow</em>. What is that I am possibly doing wrong?</p>
  
  <p><strong>Screenshot:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/8lG2q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8lG2q.png" alt="enter image description here"></a></p>