MENU


Lifting States Up

To share values across sibling components, you need to 'lift' the states up to the common ancestor, as a 'single source of truth'.

Below, changing the number in one input field instantly changes the value in the other input field, as updating the state automatically invokes render(). Notice the event handlers are effectively handled in the parent element CurrencyConverter.
RESETRUNFULL
class MoneyInput extends React.Component {
   constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
   }
   handleChange(e) {
      this.props.onMoneyChange(e.target.value);
   }
   render() {
      const amount = this.props.amount?parseFloat(this.props.amount).toFixed(2):0;
      const currency = this.props.currency;
      return (<fieldset>
    <legend>Enter amount of money in {currency}:</legend>
            <input value={amount} onChange={this.handleChange} />
                </fieldset>); }}class CurrencyConverter extends React.Component { constructor(props) {
   super(props);
      this.handleUSDChange = this.handleUSDChange.bind(this);
    this.handleEURChange = this.handleEURChange.bind(this);
      this.state = {amount: '', currency: 'USD'}; }
   handleUSDChange(amount) {
  console.log(amount);
   this.setState({currency: 'USD', amount}); } handleEURChange(amount) {
   this.setState({currency: 'EUR', amount}); } render() {
   const currency = this.state.currency;
  const amount = this.state.amount;
  const usd = currency === 'EUR' ? (amount * 1.2) : amount;
  const eur = currency === 'USD' ? (amount / 1.2) : amount;
      return (<div><MoneyInput
  currency="USD" amount={usd}
                                                         onMoneyChange={this.handleUSDChange} />
                          <MoneyInput currency="EUR"
  amount={eur}
                                              onMoneyChange={this.handleEURChange} /></div>); }}ReactDOM.render(<CurrencyConverter />,
  document.querySelector('div'));