1

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?

2 respuestas 2

1

El componente padre puede llevar el control independiente de cada uno de sus hijos, por ejemplo a través de un state en el padre y una función que tus hijos reciben como "callback" para actualizar el state en el padre.

Algo así:

const Square = (props) => {
    const { count, onChange } = props;
    let initStatusMessage = 'Aún no se ha clicado.'
    const [status, setStatus] = React.useState(initStatusMessage);

    function handleClick(){
        onChange(count + 1);
        if(count > 0){
            setStatus('Veces clicado: ');
        }
    }

    return(
        <div>
            <p>{status}</p>
            <button onClick={() => handleClick()}>{count}</button>
        </div>
    );
}


class Board extends React.Component {

    constructor(props) {
      super(props);
      this.state = { 
        childrenCounter: [0, 0]
      }
    }

    handleChange = (index, value) => {
      const nextCounter = [...this.state.childrenCounter];
      nextCounter[index] = value
      this.setState({
        childrenCounter: nextCounter,
      })
    }

    render() {
      const { childrenCounter } = this.state;
      
        return (
            <React.Fragment>
                <Square count={childrenCounter[0]} onChange={(val) => this.handleChange(0, val)} />
                <Square count={childrenCounter[1]} onChange={(val) => this.handleChange(1, val)} />
            </React.Fragment>
        );
    }

}

ReactDOM.render(<Board />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1
  • 1
    Perfecto, muchas gracias !!! lo he modificado un poco yo a mi manera, pero es lo que buscaba. Muchas gracias.
    – H. Díaz
    Commented el 22 mar. 2022 a las 12:57
0

Si usas un componente funcional (no se como se haria con clases) puedes poner el estado y el manejador de click en el padre y pasarselo como props a los hijos, de esta manera (lo hice en una pc que no tiene react como para probar, puede haber algo mal, tu pruebalo y cualquier cosa me dices):

import Square from './Square';
import React, {useState} from 'react';

    export default  const Board = () => {

  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: ');
        }
    }
    
        render(){
            return (
                <>
                    <Square count={count} status={status} handleClick={handleClick} />
                    <Square count={count} status={status} handleClick={handleClick} />
                </>
            );
        }
    
    }

el componete square:

const Square = (props) => {

    return(
        <div>
            <p>{props.status}</p>
            <button onClick={props.handleClick}>{props.count}</button>
        </div>
    );
}

export default Square;

te recomiendo este curso, es muy bueno: https://youtube.com/playlist?list=PLvq-jIkSeTUZ5XcUw8fJPTBKEHEKPMTKk

3
  • Entiendo lo que me comentas, graias por la atención prestada, pero me temo que tu ejemplo no me sirve.... ya que el valor de count sería el mismo en ambos, y quiero manejar cada count desde el padre independientemente en cada hijo. No sé si es posible o necesario hacerlo así.
    – H. Díaz
    Commented el 21 mar. 2022 a las 15:44
  • No se bien el uso q le das. Intui q count contaba las veces q dieras click en ambos componentes. Puedes entonces generar un estado para cada componente Commented el 21 mar. 2022 a las 16:39
  • Un estado para cada uno? Dentro de cada componente un estado? O en el padre dos variables diferentes?
    – H. Díaz
    Commented el 22 mar. 2022 a las 7:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.