score:0

Accepted answer
const MenuItems = [
  {
    title: "Apples",
    url: "#",
    cName: "nav-links"
  },
  {
    title: "Oranges",
    url: "#",
    cName: "nav-links"
  },
  {
    title: "Bananas",
    url: "#",
    cName: "nav-links"
  }
];

function App() {
  const [selectedItem, setSelectedItem] = useState();

  return (
    <div className="App">
      <div className="content">
        <h1>Fruit page</h1>
        {MenuItems.map((item, index) => (
          <li
            key={index}
            onClick={() => setSelectedItem(item.title)}
            style={{ cursor: "pointer" }}
          >
            {item.title}
          </li>
        ))}
        {selectedItem && (
          <h1 style={{ textAlign: "center" }}>{selectedItem}</h1>
        )}
      </div>
    </div>
  );
}

Related Query

More Query from same tag