Межкомпонентная связь React: как передавать данные между компонентами?

Здравствуйте! Вопрос касается связи между компонентами React,а именно: передача данных из одного компонента в другой.
Пусть есть страница , у которой есть массив объектов items. Для каждого элемента items создается компонент
Код Layout.jsx:
class Layout extends Component { renderItems() { var items = [ {name: 'Ivan', _id: '1'}, {name: 'Petya', _id: '2'} ];
return items.map( (each) => { return ( ); }); }
render() { return (

{this.renderItems}

); } }
Код Item.jsx:
class Item extends Component { render() { return (

{this.props.each.name}

); } }
Пусть теперь я хочу реализовать по щелчку на каждый вывод в консоль его _id. Сделать это внутри самого не составляет никакого труда:
Новый код Item.jsx:
class Item extends Component { printId() { console.log(this.props.each._id); }
render() { return (

{this.props.each.name}

); } }
Но как быть, если нужно реализовать кнопку "Показать _id" снаружи, то есть в ?
Допустим, внутри каждого добавим checkbox. Если этот чекбокс отмечен галочкой как selected, то при нажатии кнопки 'Показать _id' в консоль выводятся _id всех отмеченных Itemов.
Но как передать _id отмеченных Itemов в ?
Заранее благодарен за ответы.

Ответ

Ответ нашелся сразу в документации, спасибо @AlexeyTen за наводку. Пришлось помучиться, однако решение готов и оно ниже.
При вызове функции из компонента someFunction.bind(this) мы можем передавать любое количество аргументов: someFunction.bind(this, arg1, arg2, ...). В этом и заключается ответ.
Для примера выше: добавим функцию printId в компонент и навесим на компонент вызов printId по событию onClick. В качестве аргумента в функцию будем передавать текущий _id элемента. Новый код Layout.jsx:
class Layout extends Component { printId(id) console.log(id);
renderItems() { var items = [ {name: 'Ivan', _id: '1'}, {name: 'Petya', _id: '2'} ];
return items.map( (each) => { const eachId = each._id; return ( ); }); }
render() { return (

{this.renderItems}

); } }
Однако, код выше не будет работать. Причина в том, что это не настоящий DOM-элемент, соответственно и события OnClick у него быть не может. В строке onCLick является обычным props. Для того, чтобы этот код работал, как ожидается, нужно внутри компонента у настоящего DOM-элемента прописать передачу настоящему onClick нашу функцию из props
class Item extends Component { render() { return (

{this.props.each.name}

); } }
Теперь все работает как надо.