Mi pregunta es sencilla: ¿Cómo puedo manejar el valor de dos componentes hijo? Ejemplo:
Tengo esta clase, Board:
import React, { Component } from 'react';
import Square from './Square';
export default class Board extends Component {
render(){
return (
<>
<Square />
<Square />
</>
);
}
}
y este es el componente hijo:
import React, {useState} from 'react';
const Square = (props) => {
let initStatusMessage = 'Aún no se ha clicado.'
const [count, setCount] = useState(0);
const [status, setStatus] = useState(initStatusMessage);
function handleClick(){
setCount(count + 1);
if(status === initStatusMessage){
setStatus('Veces clicado: ');
}
}
return(
<div>
<p>{status}</p>
<button onClick={() => handleClick()}>{count}</button>
</div>
);
}
export default Square;
¿De que manera, en lugar de manejar el valor del count por cada uno de los hijos, puedo manejar los diferentes valores desde el padre?