CODEWITHSUNDEEP
reactjsredux
François Richard
François Richard

Reputation: 7055

React/redux child update child (<select> update <select>)

I have container, binded with connect() to my store. 

// GetActiveAccount.jsx
const VisibleActiveAccountsList = connect(
    mapStateToProps,
    mapDispatchToProps
)(ActiveAccountsSelector)

ActiveAccountsSelector is the presentational component. Inside this presentational component I load two child presentational components which are only 

    //activeAccountSelector render method
    return(
            <div>
                    <GatewaySelector gateways={gateways} onSelectGateway={ (e) => {
                            console.log(e.target.value);
                        }
                    }/>
                    <PairSelector gateway={gateways[0]} onSelectPair={ (e) => {
                            console.log(e.target.value);
                        }
                    }/>

            </div>
        )

What I want is that the selected value on gatewaySelector determine the value passed to PairSelector and update it when changed.

What is the right way to do that ? Going through actions seems way overkill for a simple select change update.

I guess I have to manager that in the parent (activeAccountSelector) but how ? It seems not advised to change state without going through the whole process (actions,reducers ...etc) shall I do that changing parents props ?

Upvotes: 0

Views: 133

Answers (1)

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

Yes. You have to manage that in state of the parent component. Simply, you can change set the value for gateway property of PairSelector from parent's state and change the state when gateway change in GatewaySelector.

Redux suggest to using react state for the state that doesn't matter to the app globally. Read this comment from the Redux author for more information.

class ActiveAccountSelector extends React.Component{

  contructor(props){
    super(props);
    this.state = { selectedGateway: null};
    this.onSelectGateway = this.onSelectGateway.bind(this);
  }

  onSelectGateway(e){
    this.setState({ selectedGateway: e.target.value });
  }

  render(){}
    ....
    return(
      <div>
        <form>
          <GatewaySelector gateways={gateways} onSelectGateway={ this.onSelectGateway}
          }/>
          <PairSelector gateway={this.state.selectedGateway} onSelectPair={ (e) => {
            console.log(e.target.value);
          }}/>
          </form>
      </div>
    );
  }

}

Upvotes: 1

Related Questions