Coordinated input in all text boxes

Question

I have an exercise and I do not understand how to do it.

Build a control with 5 text boxes that the input in all text boxes is correlated. Changing input in one box changes the input in the rest of the box.

class App extends Component {
 render() {
    return (
      <div>
        <MultiInput />
      </div>
    );
  }
}

function SameInput(props) {
  return <input type="text" name="sameInput"/>
}

class MultiInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "ho" };
  }

  onChange = (e) => {
    this.setState({ value: e.target.value });
  }

  render() {
    return <div>
      <SameInput value={this.state.value} onChange={this.onChange}></SameInput><br />
      <SameInput value={this.state.value} onChange={this.onChange}></SameInput><br />
      <SameInput value={this.state.value} onChange={this.onChange}></SameInput><br />
    </div>
  }
}

export default App;

Answer 1

You are passing onChange event handler function and value to SameInput functional component but you are not actually handling them in input text field in SameInput function of input element.

Try with below change it would work

 function SameInput(props) {
     return <input type="text" name="sameInput" onChange={props.onChange} value={props.value}/>
  }