Create a List Component in React | Javascript

 // src/components/List.js
import React from 'react';

const List = ({ data }) => {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default List;

Download Next
AI Explanation

This code defines a functional component named `List` in a file called `List.js`. The component takes a single prop named `data`, which is an array of items to be displayed in a list. Here's a breakdown of the code: 1. The `List` component is defined as a functional component that accepts props as an argument. 2. Inside the component, it returns a JSX element `

    ` (unordered list). 3. The `data.map()` function is used to iterate over each item in the `data` array. 4. For each item in the array, a `
  • ` (list item) element is rendered with the item's content and a unique `key` attribute set to the `index` of the item in the array. It's important to note that using the index as a key is less efficient compared to using a unique identifier if available in the data. 5. Finally, the entire list of `
  • ` elements is wrapped within the `
      ` element. 6. The `List` component is exported as the default export from the module, making it available for use in other files. Overall, this code is a simple React component that renders a list of items provided as props in an unordered list element.