Cómo cambiar el estado de un componente secundario de su padre en React

Crearemos una aplicación React simple que muestra el nombre real de un superhéroe al hacer clic en un botón.

Empecemos.

Primero, crearemos un Superherocomponente con un nameatributo en estado. Este componente lo renderizará nameprimero.

Ahora creemos una función changeName()en el Superherocomponente. Esta función cambiará el nombre en estado al nombre real del superhéroe.

Ahora tenemos el Superherocomponente que muestra el nombre del superhéroe y una función que actualiza el nombre a su nombre real.

El componente de superhéroe completo se verá así:

Ahora creemos el Appcomponente que renderizará este Superherocomponente y un botón. Cuando hacemos clic en el botón, muestra el nombre real del superhéroe.

Hemos agregado una función handleClick()que se llamará cuando el usuario haga clic en el botón. Necesitamos encontrar una forma de actualizar el estado del componente hijo, que es el Superherocomponente.

Hemos creado una función changeName()en el Superherocomponente. Esta función mostrará el nombre real del superhéroe. Si podemos llamar a esta función desde el Appcomponente, nuestro trabajo está hecho. Entonces llamaremos a esta función.

Aquí es donde los árbitros vienen a nuestro rescate.

Creemos una referencia del Superherocomponente en el Appcomponente. Aquí está el código para hacer eso.

Aquí hemos creado una referencia usando el React.createRef()método y adjuntamos la referencia al Superherocomponente usando el refatributo.

Ahora podremos referir el Superheronodo usando this.superheroElement.current. También podremos llamar a la changeName()función en el Superherocomponente usando this.superheroElement.current.changeName().

Actualicemos nuestra handleClick()función en nuestro Appcomponente para llamar a la changeName()función.

Nuestra handleClick()función se verá así.

Puede consultar el código completo en el sandbox a continuación.

CódigoSandbox

CodeSandbox es un editor en línea diseñado para aplicaciones web. codesandbox.io

¿Ahora hemos aprendido cómo actualizar el estado de un componente secundario desde un componente principal ?. Espero que esto haya sido de ayuda.