How would you render the list of names in a React component?

To render the list of names, you map over the names array inside the JSX and return a <li> for each element. Each list item should have a unique key prop to help React identify which items have changed. A typical implementation:

import React from "react";

const names = ["Ram", "John", "Sara"];

export default function NameList() {
  return (
    <div>
      <h2>Names</h2>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

This component displays a heading and an unordered list of names. Using the array index as the key is acceptable for static lists; for dynamic lists, a unique identifier should be used instead.