Common Mistakes Freshers Make in React JS - Part 2

 Generally Beginners forget to use key , when looping over data using map method :

WRONG METHOD : 

import './App.css'

function App() {

  const lists = ['a', 'b', 'c', 'd']

  return (

    <div className="App">

      {

        lists.map(item => {

          return <li> {item}</li>

        })

      }

    </div>

  );

}

export default App;

CORRECT METHOD :

import './App.css'

function App() {

  const lists = ['a', 'b', 'c', 'd']

  return (

    <div className="App">

      {

        lists.map(item => {

          return <li key={Math.random()}> {item}</li>

        })

      }

    </div>

  );

}

export default App;