class Textbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: props.text };
  }
  
  setText(newText) {
    this.setState({ text: newText });
  }
  
  render() {
    const initialText = this.props.text;
    const { text } = this.state;
    const cls = (text === initialText ? 'valid' : 'invalid');
    
    return (
      <input
        type='text'
        value={text}
        className={cls}
        onChange={(e) => this.setText(e.target.value)}
      />
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: 'hello world' };
  }
    
  render() {
    const {text} = this.state;
    return (
      <div>
        <Textbox text={text} />
        <Textbox text={text} />
        <Textbox text={text} />
        <Textbox text={text} />        
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('main'));