React Lists | React JS Tutorial

In React, we render lists with loops.

`map()`

An example of map:

function App() {
  const languages = ['JS', 'Python', 'Java', 'C', 'C++', 'C#'];
 
  return (
    <div className="App">
      {languages.map((language) => {
        return <div>I love {language}</div>
      })}
    </div>
  );
}

Output:

Output of map example

Keys

With keys, React keeps a record of elements. This ensures that if an item is updated or removed, only that item will be re-rendered instead of the entire list. Example:

function App() {
 
  const languagesDict = [
    { id: 1, language: 'JS' },
    { id: 2, language: 'Python' },
    { id: 3, language: 'Java' },
    { id: 4, language: 'C' },
    { id: 5, language: 'C++' },
    { id: 6, language: 'C#' }
  ];
 
  return (
    <div className="App">
      {languagesDict.map((language) => {
        return <div key={language.id}>
          {language.id}. {language.language}
        </div>
      })}
    </div>
  );
}

Output:

Output of keys example