Levantando estado en ReactJS

Requisito previo : ReactJs , Estado , Props

Levantando el Estado: Como sabemos, cada componente en React tiene su propio estado. Debido a esto, a veces los datos pueden ser redundantes e inconsistentes. Entonces, al elevar el estado, hacemos que el estado del componente principal sea una fuente única de verdad y pasamos los datos del padre a sus hijos.

Es hora de usar Levantar el estado: si los datos en «componentes principales y secundarios» o en «componentes primos» no están sincronizados.

Ejemplo 1: Si tenemos 2 componentes en nuestra App. A -> B donde, A es padre de B. Mantener los mismos datos en el Componente A y B puede causar inconsistencias en los datos. 

Ejemplo 2: Si tenemos 3 componentes en nuestra App.

        A
       / \
      B   C

Donde A es el padre de B y C. En este caso, si hay algunos datos solo en el componente B, pero el componente C también quiere esos datos. Sabemos que el componente C no puede acceder a los datos porque un componente solo puede hablar con su padre o hijo (no primos).

Problema: implementemos esto con un ejemplo simple pero general. Estamos considerando el segundo ejemplo.

Estructura completa del archivo:

Enfoque: para resolver esto, elevaremos el estado del componente B y el componente C al componente A. Haga que A.js sea nuestro padre principal cambiando la ruta de la aplicación en el archivo index.js

Antes:

import App from './App';

Después:

import App from './A';

Nombre de archivo- A.js:

import React,{ Component }  from 'react';
import B from './B'
import C from './C'
   
class A extends Component {
  
  constructor(props) {
    super(props);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.state = {text: ''};
  }
  
  handleTextChange(newText) {
    this.setState({text: newText});
  }
   
  render() {
    return (
        <React.Fragment>
          <B text={this.state.text} 
             handleTextChange={this.handleTextChange}/>
          <C text={this.state.text} />
        </React.Fragment>
    );
  }
}
  
export default A;

Nombre de archivo- B.js:

import React,{ Component } from 'react';
  
class B extends Component {
  
constructor(props) {
    super(props);
    this.handleTextChange = this.handleTextChange.bind(this);
}
  
handleTextChange(e){
    this.props.handleTextChange(e.target.value);
}
  
render() {
    return (
        <input value={this.props.text} 
               onChange={this.handleTextChange} />
    );
}
}
      
export default B;

Nombre de archivo- C.js:

import React,{ Component } from 'react';
  
class C extends Component {
  
render() {
    return (
        <h3>Output: {this.props.text}</h3>
    );
}
}
      
export default C;

Salida: ahora, el componente C puede acceder al texto en el componente B a través del componente A.