Как изменить вид кнопки привязкой к boolean

я бы хотел бы попросить помощь. Я нажимаю на Action и Completed меняеться на Done. Как сделать что бы когда я нажимал на Action кнопка менялась на красный цвет и вместо галочки крестик. Если не сложно можно пример. Заранее спасибо.

Код:

ToDoList.js:

 class ToDoList extends React.Component {
  render () {
  const { items, onComplete } = this.props
  return (
    <table>
    {items.map(item => (
        <tr className="hr">
          <td className="col1">{item.id}</td>
          <td className="col2">{item.text}</td>
          <td className="col3">{item.date}</td>
          <td className="col4">{item.completed ? 'Done' : 'Not Done'}</td>
          <td className="col5"><button onClick ={() => onComplete(item)} className="btn btn-xs btn-success img-circle">&#x2713;</button></td>
        </tr>
      ))}
</table>
  )
  }
} 

App.js:

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleComplete = this.handleComplete.bind(this);
  }
  render() {
    return (
      <div>
        <div className="col-md-3"></div>
        <div className="col-md-6" id="mainBlock">
          <h3 className="text-primary">Simple To Do List App</h3>
          <hr className="firstBorder"/>
          <div className="col-md-8 col-offset-md-2" id="addTask">
            <center>
              <form onSubmit={this.handleSubmit} className="form-inline todoForm">
                <input
                  className="form-control"
                  id="task"
                  onChange={this.handleChange}
                  value={this.state.text}
                />
                <button className="btn btn-primary form-control" name="add"  value="Save Item">
                  Add Task
                </button>
              </form>
            </center>
          </div>
          <div>
            <table class="table">
                    <thead>
                        <tr>
                            <th className="col1">#</th>
                            <th className="col2">Task</th>
                            <th>Created Date</th>
                            <th>Completed</th>
                  <th>Action</th>
                        </tr>
                    </thead>
            </table>
            <ToDoList items={this.state.items} onComplete={this.handleComplete} />
          </div>
          </div>
      </div>
    )
  }
  handleChange(e) {
    this.setState({ text: e.target.value });
  }
  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      id: this.state.items.length + 1,
      text: this.state.text,
      date: moment().format('l'),
      completed: false,
    }
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: '',
    }));
  }
  handleComplete(item) {
    this.setState(prevState => {
      const newItems = prevState.items
        .map(oldItem => {
          if (oldItem.id === item.id) {
            return { ...oldItem, completed: !item.completed };
          }
          return oldItem;
        });
      return { items: newItems };
    });
  }
}