0

Quiero cambiar el state de un componente desde el nieto, este es mi componente 'abuelo'(No pongo todo el código porque es demasiado largo):

class ContentAccept extends Component {
    constructor(props: any) {
        super(props);
        this.state = {
            initialArray: []
        }
    }

'initialArray' es una lista a la que yo después le añado valores y tal. Yo lo que quiero ahora es desde el componente 'nieto' añadir o quitar objetos a la lista. Para eso tengo entendido que tengo que crear una función en el componente 'abuelo' para modificar la lista, el primer problema es que desde una función no me deja acceder al state, por ejemplo, si yo añado esta función en el componente abuelo salta error:

hola() {
        console.log(this.state.initialArray);
    }

Alguna idea de como puedo hacerlo?

1
  • ¿Estás usando el template create-react-app para implementar la arquitectura de tu app? o solo estas usando el CDN de React en tu index.html, Saludos
    – g.4
    el 9 dic. 2020 a las 17:43

1 respuesta 1

1

Lo que podrías hacer es desde el componente abuelo pasar la función hacia el nieto usando las props.

Es decir en tu componente Abuelo:

class Abuelo extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      initialArray: ["Item 1"]
    };
  }

  /**
   * Metodo que pasaremos via props al padre y del padre al nieto
   */
  modificar = () => {
    let nuevo = prompt("Añadir nuevo:");
    this.setState({
      initialArray: this.state.initialArray.concat(nuevo)
    });
  };

  render() {
    return (
      <div className="App">
        <PadreHijo
          modificar={this.modificar}
          initialArray={this.state.initialArray}
        />
      </div>
    );
  }
}

Luego en la clase del Padre/Hijo le pasaremos las props al nieto que es a la vez el hijo del padre.

class PadreHijo extends React.Component<any, any> {
  render() {
    return (
      <NietoHijo
        modificar={this.props.modificar}
        initialArray={this.props.initialArray}
      />
    );
  }
}

Y en el componente nieto simplemente hacemos uso de esas props.

class NietoHijo extends React.Component<any, any> {
  render() {
    return (
      <div>
        {this.props.initialArray.map((item: any, index: number) => (
          <h2 key={index}>{item}</h2>
        ))}
        <button onClick={this.props.modificar}>Modificar</button>
      </div>
    );
  }
}

Te dejo el link de una demo que te hice.

hola() {
        console.log(this.state.initialArray);
    }

Esta parte de código no te funciona porque no estas haciendo el bind. Tienes dos maneras de hacerlo.

  1. Usar arrow function
  2. Hacer el bind en el constructor tipo: this.hola = this.hola.bind(this)

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.