Есть массив обьектов, есть 4 компонента, один заголовок, и три div'a, функциональные компоненты принимают значения из массива и рендерятся. Рендер отрабатывает, текст есть. Но вот незадача - нужно сделать так, чтобы по нажатию на нужный компонент в заголовке переписывались значения из нажатого div'a, получается считать значения после события onlick, скопировать, передать значения в пропсы заголовка, и переписать. Документацию реакта читал, дельного пока не нашел. Как придумать самописную функцию под эту задачу - ума не приложу. Возможно ли это? Если да, то как?
https://codepen.io/mitrei088/pen/jOxQxJx
const data=[
{
name: 'Jon',
phone: '+380123456789'
},
{
name: 'Alice',
phone: '+380123123123'
},
{
name: 'Bob',
phone: '+380123213543'
}
]
function Card(props){
const click=()=>{
alert('the element was clicked');
}
return(
<div onClick={click} className='SubBlock'>
<p>{props.name}</p>
<p>{props.phone}</p>
</div>
)
}
function CardHeader(props){
return(
<div className='Block'>
<p>The header component will show the name and phone of clicked component</p>
<p>{props.name}</p>
<p>{props.phone}</p>
{/*console.log(props)*/}
</div>
)
}
function App() {
return (
<>
<CardHeader/>
<div className='Block'>
{data.map((result,index)=> <Card key={`div number-${index}`} name={result.name} phone={result.phone}></Card>)}
</div>
<TestDiv/>
</>
);
}
function sayHello(){
alert('the element is clicked');
}
function TestDiv(){
return(
<div onClick={sayHello} className='Block'>
Test OnClick div
</div>
);
}
ReactDOM.render(<App />,
document.getElementById("root"))