Pasar datos entre dos componentes hermanos de React.js

Te damos la solución a este disgusto, o por lo menos eso creemos. Si sigues con inquietudes dínoslo, que sin pensarlo

Solución:

Creé un jsfiddle con un ejemplo de cómo compartir una variable entre dos componentes usando un componente principal.

class Parent extends React.Component 
    constructor(props) 
        super(props);
        this.state = shared_var: "init";
    

    updateShared(shared_value) 
        this.setState(shared_var: shared_value);
    

    render() 
        return (
            

                
                
                
 The shared value is this.state.shared_var 
            
        );
    


class CardSearch extends React.Component 
    updateShared() 
        this.props.updateShared('card');
    

    render() 
        return (
            
            card
            
        );
    


class RunOnServer extends React.Component 
    updateShared() 
        this.props.updateShared('run');
    

    render() 
        return (
            
            run
            
        );
    



ReactDOM.render(
  ,
  document.getElementById('container')
);

A partir de 2020, febrero; Context API es la forma de manejar esto:

// First you need to create the TodoContext


// Todo.jsx
//...
export default () => 
  return(
    <>
      
        
        
      
    
  )


// Now in your TodoList.jsx and TodoCalendar.jsx; you can access the TodoContext with:
//...
const todoContext = React.useContext(TodoContext);
console.log(todoContext)
//...
//...

Vea este video tutorial de The Net Ninja para Hooks & Context API

Buena suerte…

Aquí tienes las reseñas y puntuaciones

Al final de la página puedes encontrar las explicaciones de otros sys admins, tú además eres capaz insertar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador