Пытаюсь по клику на элемент получить значение {key.name} и передать его в другую компоненту. Для начала, задача получить e.target.value элемента, не могу разобраться почему получаю undefined, ведь у элемента {key.name} есть значение.
const mainPage = () => {
const handleChange = (e) => {
const name = e.target.value
console.log("value: ", name );
}
return (
<div>
{items.map(key => {
return <div key={key.id} variant="inherit">
<Box sx={{ width: '100%' }}>
<Stack spacing={2}>
<Item>{key.sport_title}</Item>
<Stack>
{key.books[0].markets[0].outcomes.map(key => {
return <Item onClick={handleChange} key={key.id} value={key.name}> {key.name}
<Typography >{key.name}</Typography>
<Typography >{ key.price}</Typography>
</Item>
})}
</Stack>
</Stack>
</Box>
</div>
})}
</div>
)
}
e.target
это тот объект, по которому нажали. Видимо у него нет value.