React07 – Lists

In React, you must define the key inside at least the «li» elements. This is done to make the Virtual DOM more efficient.

App.jsx

import { useState } from 'react'
import FruitList from './components/FruitList'

function App() {


  return (
    <>
      <FruitList/>
    </>
  )
}

export default App

FruitList.jx

const FruitList=() => {

const fruits = ["apple", "banana", "cherry"];

  return (

    <>
    <h1>Fruit List</h1>
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li> 
        /* Unique key for each element */
      ))}
    </ul>
     </>
  );
 
}

export default FruitList;

Each key must be unique