Pasar props a componente hijo, después de setState en React

publicado por: Anonymous

Tengo un problema que no estoy pudiendo solucionar:
Quiero pasar props de un Padre a un Hijo. Esos props vienen desde otro Hijo. El tema es que, al ser setState asíncrono, la primera vez que envío los props están vacíos.

class Pedidos extends Component {

   constructor(){
        this.state = {
             array: []
        }
   }

   pedidoUpdater = (extArray) => {  //recibe un array de Hijo1
        this.setState({
            array: extArray
        })  
   }

   render() {
        return(
            <div className="MainDiv">
              <div className="Hijo1">
                <Hijo1 pedidoUpdater={ this.pedidoUpdater }/>
              </div>
              <div className="Hijo2">
                <Hijo2 comidas={this.state.array}/>
              </div>
            </div>
        )
   }
}

Si pongo un forceUpdate como callback en el setState, Hijo2 termina recibiendo bien los props, pero tengo entendido que es mala práctica o no recomendable hacerlo de esa forma.
Quizá estoy encarando mal la situación? O hay algo que no veo?

solución

No sé qué es lo que tienes en Hijo1, pero si es un botón el que está llamando la función del padre, entonces tu problema es que en ningún momento le estás pasando la función al evento onClick de Hijo1. Solo estás llamando el evento.

Debería ser así

<button onClick={() => pedidoUpdater(["asado", "lasagna", "ensaladas"])}>
  Click me
</button>

Te dejo un ejemplo

https://codesandbox.io/s/7j126rq95q

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *