Simplest Todo APP in React

<div id="root"></div>

class TodoApp extends React.Component{

  constructor(props){
    super(props);
    this.state={
      input:'',
      list:[],
      error:false
    }
    this.handleInput = this.handleInput.bind(this);
    this.submit = this.submit.bind(this);
  }

  handleInput(event){
    this.setState({
      input : event.target.value
    });
  }

  submit(){
    this.setState(state=>{
      if(this.state.list.indexOf(this.state.input) != -1){
        return{error:true}
      }

      return {list:this.state.list.concat(this.state.input),error:false}
    })

  }

  render(){
    return(
      <div>
        <input type='text' value={this.state.input} onChange={this.handleInput}/>
        <button onClick={this.submit}>Submit</button>
        {this.state.error==true?' Opps List item already exists':' Great!'}
        <ListComponent list={this.state.list} />
      </div>
    );
  }
}

class ListComponent extends React.Component{

  constructor(props){
    super(props);
  }

  render(){

    const listItems = this.props.list.map((d,idx) => <li key={idx}>{d}</li>);

                                          return(
                                          <div>
                                            <ol>
                                              {listItems}
                                            </ol>
                                          </div>
                                         )
    }
}

ReactDOM.render(<TodoApp/>,document.getElementById('root'));