Как-то так (добавил обработчик onClick
на клик по div
тэгу, а также поменял значение первой буквы у аттрибута id
на верхний регистр, чтобы было соответствие именам в state
):
class Fruit extends React.Component {
constructor(props) {
super(props);
this.state = {
fruits: {
Apple: 45,
Orange: 40,
Apricot: 50
},
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
const { id } = e.currentTarget;
const value = this.state.fruits[id];
console.log('Name of fruit:', id);
console.log('Value from state:', value);
}
render() {
return (
<div className="fruitsList">
<div className='fruits' id='Apple' onClick={this.handleClick}>
<p> Яблоко 45 cal </p>
</div>
<div className='fruits' id='Orange' onClick={this.handleClick}>
<p> Апельсин 40 cal </p>
</div>
<div className='fruits' id='Apricot' onClick={this.handleClick}>
<p> Абрикос 50 cal </p>
</div>
</div>
)}
}
ReactDOM.render(
<Fruit />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
Первое - у Вас fruits
- это не массив, а объект.
Второе - нужно учитывать регистр значения, указанного в id
когда обращаемся к проперти в объекте fruits
. Для примера this.state.fruits['Apple']
- сработает, а this.state.fruits['apple']
- вернет undefined
.
Третье - функция handleClick
имеет привязку через bind
в конструкторе, делается это, чтобы можно было работать со state
. Эта привязка обязательна для работы this
в функции (потому что методы класса в JavaScript по умолчанию не привязаны к контексту). Почитать про обработку событий тут: Обработка событий