title: React and MySQL. got Warning: Each child in a list should have a unique "key" prop
body: <p>I connected React with MySQL database and it works well when I take inputs and pass them in the database. But when I try to print all the data in the MySQL database, I can only successfully print the columns age and email, but not name and course. More specifically, the name and course are simply just not showing, yet the other two columns are working with no problem. I can see all the correct information from the database in the console, but they are not shown properly on the page. The column age is of type int/number, name, course, and email are of type varchar.
  In the console, I got the warning in the question summary. Below is my code in App.js. Thanks in advance for any help!</p>
  <pre><code>import './App.css';
  import {useState} from &quot;react&quot;;
  import Axios from &quot;axios&quot;;
  
  function App() {
    const [newCourse, setNewCourse] = useState(&quot;&quot;);
    const [stuList, setStuList] = useState([]);
  
    const getStudents = () =&gt; {
      Axios.get(&quot;http://localhost:3001/students&quot;).then((response) =&gt; {
        console.log(response);
        setStuList(response.data);
      });
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;showStudents&quot;&gt;
          &lt;button onClick={getStudents}&gt;Show Students&lt;/button&gt;
  
          {stuList.map((val, key) =&gt; {
            return (
              &lt;div className=&quot;students&quot;&gt;
                &lt;div&gt;
                  &lt;h3&gt;Name: {val.name}&lt;/h3&gt;
                  &lt;h3&gt;Age: {val.age}&lt;/h3&gt;
                  &lt;h3&gt;Email: {val.email}&lt;/h3&gt;
                  &lt;h3&gt;Course: {val.course}&lt;/h3&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            );
          })}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>