score:2

Accepted answer

Just pass it as a prop in your map:

<Todo item={todo} key={todo.id} />

Then in your Todo component, you can grab the data:

<div>
    <div>Title: {this.props.item.title}</div>
</div>

EDIT: Added the key as pointed out by Richard Fazzi.

score:2

Well, I'm learning react too and I have this to say to you:

Every list must have a key, like this:

const menu = this.props.dishes.map((dish) => {
            return (
                <div key={dish.id} className="col-12 mt-5">
                    <Media tag="li">
                        <Media left middle>
                            <Media object src={dish.image} alt={dish.name}/>
                        </Media>
                        <Media body className="ml-5">
                            <Media heading>{dish.name}</Media>
                            <p>{dish.description}</p>
                        </Media>
                    </Media>
                </div>
            );
        });

And I really think you should use a list.

The other thing I think you should do is to create a variable with the returned value from the map, then you can return that, eaxmple:

return (
            <div className="container">
                <div className="row">
                    <Media list>
                        { menu }
                    </Media>
                </div>
            </div>
        );

Hope it helps

score:2

If you want to pass that value to Todo you just pass it like you did with TodoList: In TodoList.jsx:

<Todo title={todo.title} />

and in Todo.jsx:

const { title } = this.props;
<p> Title: { title } </p>

Or you can pass the whole object:

<Todo todo={todo} />

const { title } = this.props.todo;
<p> Title: { title } </p>

Related Query

More Query from same tag