Change color to selected. Where is the mistake?

Question

React

class App extends React.Component {

  constructor(props){
      super(props);
             
      this.state = { color: this.props.colors[0] };
      
      this.changeColor = this.changeColor.bind(this);
  }
  
  changeColor(e){
    this.setState( { color: e.target.value });
  }
 
  render(){          
    return <div>
          <p style={{backgroundColor: this.state.color}}>sample text</p>
          <select onChange={this.changeColor}>
             {this.props.colors.map(c => (<option value={c}>{c}</option>))}
          </select>
          </div>
    }
          
}

ReactDOM.render(
  <App colors={['red', 'green', 'blue']}/>,
  document.getElementById("ex")
);
  
export default App;

Answer 1

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

Answer 2

There is no problem in the code below:
Look for the error elsewhere.
PS Judging by the text of the error, your array colorsdoes not come in props.