0

Estoy haciendo un componente de React que recibe data desde un select y cambia el estado, se ve así:

this.state = {
  quantity: '3',
  color: 'blue',
  category: 'shirts'
}

Este es el componente que está recibiendo esos estados:

render(){
   <ClothingCards attributes= {{
      quantity: this.state.quantity,
      color: this.state.color
      category: this.state.category
    }}
    />

Quiero que los props que le envío al hijo cambien cuando alguno de los estados cambie (color, quantity o category). Por el momento no sirven, los props se quedan con sus estados iniciales. Cómo puedo hacer que cambien cuando el estado cambie?

La siguiente función es la que estoy utilizando para actualizar el estado, los valores los estoy trayendo desde otro componente hijo que es un select.

handleSelect(currentKey, currentValue) {
    this.setState({ [currentKey]: currentValue})
  }
1
  • ¿A qué te refieres con: los valores los estoy trayendo desde otro componente hijo que es un select. ?
    – FranAcuna
    Commented el 16 mar. 2021 a las 19:58

1 respuesta 1

0

De la documentación oficial de React:

Por defecto, cuando el componente de tu estado o accesorio cambia, tu componente re-renderizará.

Por lo tanto si los props de tu componente hijo cambian se va a re-renderizar con los nuevos. Esto nos deja con dos posibilidades:

  1. No se están pasando los props al hijo de manera correcta y por lo tanto este no puede re-renderizarse.
  2. El estado de tu componente padre no se está actualizando y por lo tanto este no se re-renderiza, ni tampoco el componente hijo.

Para lo que te sugiero respectivamente:

  1. Pasar los props de manera individual si es posible, es decir:
    render(){
   <ClothingCards 
      quantity = this.state.quantity,
      color = this.state.color
      category = this.state.category
    />
  1. Hacer un console.log de tu estado justo después de this.setState({ [currentKey]: currentValue}) para corroborar que efectivamente está cambiando el estado y este cambio se puede propagar por medio de los props a tu componente hijo.

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.