Lists and Keys

Use .map() to turn an array into a list of elements. Every item needs a unique key so React can track which items changed. Use a stable id from your data as the key. Avoid using the array index if the list can be reordered.

const topics = [
  { id: "js", name: "JavaScript" },
  { id: "py", name: "Python" },
]

function TopicList() {
  return (
    <ul>
      {topics.map((topic) => (
        <li key={topic.id}>{topic.name}</li>
      ))}
    </ul>
  )
}