Updating a react component from a completely separate component

Question

I am looking for a way to rerender one react component based on input to another. I am using react without Flux / Redux and have committed enough to the project that I do not think that is a direction I can take at this point.

What I want to do looks sort of like this:

class Component1 extends React.Component{
    constructor(props){
        super(props);

        window.global = 0;
        this.state = {};

        this.changeGlobal = this.changeGlobal.bind(this);
    }

     changeGlobal(value){
         window.global = value;
    }

    render(){

        return (<div> 
                <a onClick={() => changeGlobal(1)}>One</a>
                <a onClick={() => changeGlobal(2)}>Two</a>
               <a onClick={() => changeGlobal(3)}>Three</a>
               </div>);
    }
}


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

    render(){

        if(window.global === 0){
             return <Something/>;
        }

        if(window.global === 1){
             return <SomethingElse/>;
        }

        etc...
    }
}

Except that I'd like Component2 to rerender every time the global value is changed by Component1. Does anyone have any idea how this can be achieved?

Answer 1

I managed to achieve this using events:

class Component1 extends React.Component{
    constructor(props){
        super(props);

        this.state = {};

        this.changeGlobal = this.changeGlobal.bind(this);
    }

    changeGlobal(value){
        var event = new CustomEvent('myEvent', { detail: value });
        document.body.dispatchEvent(event);
    }

    render(){

        return (<div> 
                <a onClick={() => changeGlobal(1)}>One</a>
                <a onClick={() => changeGlobal(2)}>Two</a>
               <a onClick={() => changeGlobal(3)}>Three</a>
               </div>);
    }
}


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

        this.handleEvent = this.handleEvent.bind(this);
    }

    handleEvent(event) {
        this.setState({ value: event.detail});
    }

    componentDidMount() {
        document.body.addEventListener('myEvent', this.handleEvent, false);
    }

    componentWillUnmount() {
        document.body.removeEventListener('myEvent', this.handleEvent, false);
   }

    render(){

        if(this.state.value === 0){
             return <Something/>;
        }

        if(this.state.value === 1){
             return <SomethingElse/>;
        }

        etc...
    }
}

Answer 2

A Redux implementation is completely aside from React, it means you can implement it whenever you want, however you want, and to the components which you only want to, it won't be the best written code nor the best practice, but still a possibility, just saying. And well, if you want to correctly update a component (also making the change being rendered) you need to change that component state, if not, the changes will never be rendered even if you accomplish to pass one value from one component to another.

I'm not an expert on this, but my recommendation would be that you link the state of Component2 to it's props, so it can be modified by an external component. The most common way is to wrap both components in a parent component, then, whenever the value in Component1 changes it will fire an event (or function) that will be handled by the parent component, then the later will pass that value to Component2 through it's props and (probably) firing a function that will change the state of Component2.