У меня есть множество компоентов в dropdown списке. Надо чтобы при нажатии на любой из элементов списка, происходило конкретное действие.
Если я делаю так:
functiion filter() {
return(
<div className={`${styles.option_list} no_decorate`}>
{Object.entries(selectedItem).map(region => {
let test = 'test'
return <Card key={uniqueKeyGenerator()} region={region[0]} selected={region[1]} onClick={(test) => console.log(test)} />
}
)}
</div>
)
}
function Card({ region, selected = false }) {
return (
<div className={`${styles.option} ${selected ? styles.selected : ''}`}>
{region}
</div>
)
}
то в консоли не выводится ничего. Если же я делаю так:
functiion filter() {
return(
<div className={`${styles.option_list} no_decorate`}>
{Object.entries(selectedItem).map(region => {
let test = 'test'
return <Card key={uniqueKeyGenerator()} region={region[0]} selected={region[1]} onClick={(test) => console.log(test)} />
}
)}
</div>
)
}
function Card({ region, selected = false, onClick }){
return (
<div onClick={onClick} className={`${styles.option} ${selected ? styles.selected : ''}`}>
{region}
</div>
)
}
то в консоли выводится это:
Вопрос - как мне реализовать реакцию на событие onClick
с передачей параметра.