Cómo actualizar el estado de un componente hermano de otro componente hermano o importado en REACT

Ten en cuenta que en la informática un problema suele tener más de una soluciones, pero nosotros mostraremos la mejor y más óptimo.

Solución:

Necesitas levantar tu estado en tu situación. La segunda opción es lo que sugirió @Gavin Thomas en el comentario. Pero sin Redux puedes hacerlo así:

const InputArea = (props) => 
  const handleChange = (e) => props.handleInputValue(e.target.value);

  return (
    

      

        
      
    
  );
;

const DisplayArea = (props) => (
  

    

      
props.inputValue
    
  
);

class App extends React.Component 
  state = 
    inputValue: "Initial Value",
  ;

  handleInputValue = (inputValue) => this.setState( inputValue );

  render() 
    return (
      

        
        
      
    );
  


ReactDOM.render(, document.getElementById("app"));

Aquí, mantenemos nuestro estado de valor de entrada en el componente principal, que es App. Pasamos una función de devolución de llamada a InputArea y cambiamos el estado de nuestro componente principal usando esta función de devolución de llamada. Luego pasamos este estado a nuestro componente DisplayArea.

Aquí están las partes relevantes del código. Básicamente pasando un liftState método a la InputArea componente que realmente actualizará el estado de App cuando se llama entonces pasa content para DisplayArea como apoyo

class App extends Component 
    constructor(props) 
        super(props);
        this.state = 
            content: ""
        ;
    
    liftState = state => 
        this.setState(state);
    
    render() 
        return (
            

                
                
            
        );
    


class InputArea extends Component 
    handleChange(event) 
        this.props.liftState(content: event.target.value);
    


class DisplayArea extends Component 
    render() 
        return (
            

                

                    
this.props.content
                
            
        )
    

La documentación de React.js dice (Levantando el estado hacia arriba):

A menudo, varios componentes deben reflejar los mismos datos cambiantes. Recomendamos elevar el estado compartido hasta su ancestro común más cercano…

Ejemplo:

// Parent component which contains shared state
class Parent extends Component 
  constructor(props) 
    super(props);

    this.state = 
      child1Value: 0,
      child2Value: 0,
    

    this.handleChild1Click = this.handleChild1Click.bind(this);
    this.handleChild2Click = this.handleChild2Click.bind(this);
  

  handleChild1Click(nextValue) 
    this.setState( child1Value: nextValue );
  

  handleChild2Click(nextValue) 
    this.setState( child2Value: nextValue );
  

  render() 
    return (
      

        
        
      
    )
  



class Child extends Component 
  constructor(props) 
    super(props);

    this.handleClick = this.handleClick.bind(this);
  

  handleClick() 
    this.props.onClick(this.props.value + 1);
  

  render() 
    return (
      

        
Value of my sibling: this.props.value
        
      
    )
  

Sección de Reseñas y Valoraciones

Tienes la opción de añadir valor a nuestra información colaborando tu veteranía en las aclaraciones.

---

---

Utiliza Nuestro Buscador