ColorCard.js

class ColorCard extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {color: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
    // this.handleChange = this.handleChange.bind(this);
  }
  
  handleSubmit(e) {
    this.setState({color: this.input.value});
    this.input.value = '';
    this.input.focus();
    
    e.preventDefault();
  }
  
  // handleChange(e) {
  //   this.setState({color: e.target.value});
  // }
  
  render() {
     let squareStyle = {
        width: 200,
        height: 200,
       border:'1px solid grey',
       marginBottom: 10,
       backgroundColor: this.state.color
      }
     
     let buttonStyle = {
       marginLeft: 6,
       borderRadius: 4,
     }
     
    return (
      <div>
        <div style={squareStyle}>
        </div>
        <form onSubmit={this.handleSubmit} ref='form'>
          <input 
            type='text' 
            placeholder='enter color here' 
            ref={ el => this.input = el} />
          <button type='submit' style={buttonStyle} >Go</button>
        </form>
      </div>
    )
  }
}

ReactDOM.render(<ColorCard />, document.querySelector('#root'));

// HTML
// <div id='root'></div>