I need to pass a variable from one component to another

Question

I have a plugin called form in which I get two data val1 and val2 and this is passed to a plugin called route and this must be passed to the game plugin, my variables reach the parent but then I can't pass it to the child plugin called game. Please help me or give me some guides to do it.

The variable var1 is that I rescue and I must pass to the game.

class Routes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
    this.localVar1 = "";
  }

  datosDeFormInicio = (var1,var2) =>{
    this.localVar1 = var1;
  }

  render() { 
    return (
      <Router>
        <Switch>
          <Route path="/juego">
            <Juego localVar1={this.localVar1} />
          </Route>
          <Route path="/">
            <Inicio datosDeFormInicio = {this.datosDeFormInicio}/>
          </Route>
        </Switch>
      </Router>  );
  }
}

export default Routes;

Answer 1

In Reactjs, you can use redux to pass a value to other components, It's state management in Reactjs. However, you can use https://github.com/facebookarchive/emitter for simple.

Answer 2

You'll need to use state instead of that variable. You'll need to add localVar1 to the state object you have this.state{localVar1: ""};

How

You'll need to use this.setState() in datosDeFormInicio()

    datosDeFormInicio = (var1,var2) =>{
        this.setState(localVar1: var1);
    }

Usually, I would call this function setLocalVar1, but it's just a naming convention.

Why

To lightly explain why yours won't work: it has to do with the order that React updates components, and setState() triggers the parent component to rerender, which is why you won't directly assign an object to the state variable

( this.state.localVar1 = someVar also doesn't trigger the rerender`)

Here is the link to setState in the React docs, for a more detailed explanation: https://reactjs.org/docs/react-component.html#setstate

Answer 3

thank you very much for the answer, I followed the steps using a state, but still it does not pass me the localVar variables in the component Juego, the empty variables arrive. This is the code you make.

 constructor(props) {
        super(props);
        this.state = {localVar:'',localVar2:''}
      }
      datosDeFormInicio = (var1,var2) =>{       
         this.setState({localVar: var1,localVar2:var2});
      }
 render() { 
    return (
      <Router>
          <Switch>
              <Route path="/juego">
                <Juego localVar={this.state.localVar} localVar2={this.state.localVar2} />
              </Route>
              <Route path="/">
                <Inicio datosDeFormInicio = {this.datosDeFormInicio}/>
              </Route>
          </Switch>
      </Router>  );
  }