How to pass an array of items in React.js

Answer 1

Data can be passed to components via props.

https://facebook.github.io/react/tutorial/tutorial.html#passing-data-through-props

In your case props would be accessed inside the components via this.props.

<TodoList /> takes a prop called items which is an array. Inside <TodoList /> you can map through that array and return elements.

For example in the render method of your class you would return TodoList with a prop of items:

const myItems = [{ name: 'item 1' }, { name: 'item2' }];
function MyApp() {
    return (
       <TodoList items={myItems} />
    );
}

Then in TodoList you map the items

function TodoList({ items }) {
    return items.map(item => (
        <h1>{item.name}</h1>
    ));
}

Answer 2

You just set up an attribute, with the same name

<ToDoList items={myitems} />