¿Cómo configurar el estado principal del componente secundario en ReactJS?

Podemos establecer el estado principal del componente secundario en ReactJs utilizando el siguiente enfoque.

Requisito previo: introducción estatal en ReactJS

• De hecho, estableceremos el estado de un elemento principal en el componente principal en sí, pero los elementos secundarios serán responsables de la configuración.
• Crearemos una función en padre para establecer el estado con la entrada dada.
• Pasaremos esa función en los niños como apoyo.
• Entonces Children llamará a la función con un nuevo valor.
• Estableceremos el estado del padre en la función.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Paso 3: ahora cree componentes primarios y secundarios en la carpeta src con el siguiente código.

Nombre de archivo- Child.js:

import React,{ Component }  from 'react';
   
class Child extends Component {
  
  constructor(props) {
    super(props);
    this.handleClick.bind(this);
  }
    
  handleClick = () => {
    // We will start the process of changing
    // state of parent from Here...
  }
  
  render() {
    return (
        <button onClick={this.handleClick}>Reveal Title</button>
    );
  }
}
  
export default Child;

Nombre de archivo- Parent.js:

import React,{ Component }  from 'react';
import "./parent_css.css"
  
// Importing child component for rendering
import Child from './child';
   
class Parent extends Component {
  
  constructor(props) {
    super(props);
    this.state = {title: ""};
  }
  
  render() {
    return (
        <React.Fragment>
          // Rendering title of state initially empty.
          <h1> {this.state.title} </h1>
            
          // Rendering child component here which 
          // contains only a button
          <Child />
        </React.Fragment>
    );
  }
}
  
export default Parent;

Paso 4: Cree la función setStateOfParent para establecer el estado de Parent en el componente Parent, también pase la función setStateOfParent en los elementos secundarios.

Nombre de archivo- Parent.js:

import React,{ Component }  from 'react';
import "./parent_css.css"
  
import Child from './child';
   
class Parent extends Component {
  
  constructor(props) {
    super(props);
    this.setStateOfParent.bind(this);
    this.state = {title: ""};
  }
  
  // Creating below function to set state 
  // of this (parent) component.
  setStateOfParent = (newTitle) => {
    this.setState({title: newTitle});
  }
  
  render() {
    return (
        <React.Fragment>
          <h1> {this.state.title} </h1>
            
          // Passing the setStateOfParent function 
          // in child as a prop
          <Child setStateOfParent = {this.setStateOfParent}/>
        </React.Fragment>
    );
  }
}
  
export default Parent;

Paso 5: Ahora acceda y llame a la función setStateOfParent en los niños siempre que desee establecer el estado del padre.

Nombre de archivo- Child.js:

import React,{ Component }  from 'react';
   
class Child extends Component {
  
  constructor(props) {
    super(props);
    this.handleClick.bind(this);
  }
  
  handleClick = () => {
    // Simply call the setStateOfParent function from 
    // prop and pass required argument
    this.props.setStateOfParent("Geeks For Geeks");
  }
  
  render() {
    return (
        <button onClick={this.handleClick}>Reveal Title</button>
    );
  }
}
  
export default Child;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: