Пример синхронизации двух полей с помощью React Context

index.js

import React from "react";
import ReactDOM from "react-dom";

const UserContext = React.createContext();

const Donor = () => (
  <UserContext.Consumer>
    { 
      store  => {
        const { value, onChange } = store
        return <input onChange={onChange} value={value} />
      }
    }
  </UserContext.Consumer>
);

const Recipient = () => (
  <UserContext.Consumer>
    {
      store => {
        const { value, onChange } = store
        return <input onChange={onChange} value={value} />
      }
    }
  </UserContext.Consumer>
)

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      value: ''
    }
  }

  onChange = event => this.setState({value: event.currentTarget.value})

  render() {
    return (
      <UserContext.Provider value={{value: this.state.value, onChange: this.onChange}}>
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <Donor />
          <Recipient />
        </div>
      </UserContext.Provider>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);