todolist react

import React from 'react';

const ListItem = (props) => {
  return (
    <li>
      <span className='text-normal'>{props.item}</span>
      <button
        onClick={props.onClickRemove}
        className="btn btn-remove">remove</button>
      <button
        onClick={props.onClickDone}
        className="btn btn-done">done</button>
    </li>
  )
}
export default class TodoList extends React.Component {
  constructor() {
    super();
    this.state = {
      term : '',
      styleDone: '',
      itemList : ['js', 'Ruby', 'Java', 'Vim']
    }
  }
  removeButton = (index) => {
    let newArr =  [...this.state.itemList]
    newArr.splice(index, 1)
    this.setState({
      itemList : newArr
    });
  }
  doneButton = (index) => {
    console.log(2);
    let textNormal =  document.querySelector('.text-normal')
    let newArr =  this.state.itemList.forEach(function (cle, i, origin) {
      i === index ? <span className="done">{cle}</span> : cle
    });
    this.setState({
      itemList: newArr
    });
  }
  onClickTerm = (e) => {
    e.preventDefault()
    let term = document.querySelector('.term').value,
      cpItemList = this.state.itemList.slice()
    if ( cpItemList.includes(term) === false ) {
      let newArrItem = [...this.state.itemList, term]
      this.setState({
        itemList : newArrItem,
      });
      document.querySelector('.term').value = ''
    }
  }
  render() {
    const items = this.state.itemList.map( (element,index) => {
      return <ListItem
          key={element.toString()}
          item={element}
          onClickRemove={ () => this.removeButton(index)}
          onClickDone={ () => this.doneButton(index)} />
    });
    return (
      <div>
        <div className="form">
          <input type='text'
            className="term" 
            />
          <button 
            onClick={this.onClickTerm}>
            Add
          </button>
        </div>
        <ul>
          {items}
        </ul>
      </div>
    );
  }
}