Keys

React can keep track of the elements using Keys. It helps re-render only that item when it is updated or removed instead of the entire list of items. The key must be a unique id and is defined with key .

Syntax

<Component key={value} />

Example

function Student(props) {
  return <li>My name is {props.name}</li>;
}

function Test() {
  const students = [
    { id: 1, name: "John" },
    { id: 2, name: "Billy" },
    { id: 3, name: "Will" },
  ];
  return (
    <>
      <h1>List of students</h1>
      <ul>
        {students.map((student) => (
          <Student key={student.id} name={student.name} />
        ))}
      </ul>
    </>
  );
}