import "./App.css";

function MyButton() {
  return <button>MyButton</button>;
}

const products = [
  { title: "Cabbage", isFruit: false, id: 0 },
  { title: "Garlic", isFruit: false, id: 1 },
  { title: "Apple", isFruit: true, id: 2 },
];

function App() {
  const listitems = products.map((product) => (
    <li style={{ color: product.isFruit ? "red" : "green" }} key={product.id}>
      {product.title}
    </li>
  ));

  return (
    <div>
      <h1>Home</h1>
      <MyButton />
      <ul>{listitems}</ul>
    </div>
  );
}

export default App;