How to toggle a checkbox to change style to execution using reaction

Question

I made a todo application using the reaction and now facing a problem when changing the layout of the text. I want to toggle the checkbox so that when I click the checkbox the style changes to strikethrough and vice versa. The code is as follows:

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state={
      todo:[]
    };
  };

  entertodo(keypress){
    var todo=this.refs.newtodo.value;
    if( keypress.charCode == 13 )
    {
      this.setState({
        todo: this.state.todo.concat(todo)
      });
      this.refs.newtodo.value=null;
    };
  };
  todo(data,i){
    return (
      <li>
      <input type="checkbox" onChange={this.todoCompleted.bind(this)}className="option-input checkbox"/>
      <div key={data.id} className="item">
      {data}
      <button onClick={this.remove.bind(this,i)}className="destroy"></button>
      </div>

      </li>
    );
  };
  remove(i){
    var deletetodo = {...this.state.todo};
   this.state.todo.splice(i,1);
   this.setState({todo:this.state.todo})
 };
 todoCompleted(){
   var todo={...this.state.todo}
   if(this.state.checked){
     this.setState({
      todo:this.state.todo.style.textDecoration=='line-through'
     });
   }
   else {
     this.setState({
       todo:this.state.todo.style.textDecoration=='none'
     });
   }
 };

  render() {

    return (
      <div>
      <div className="lines"></div>
      <div>
      <input type="text" ref= "newtodo" onKeyPress={this.entertodo.bind(this)}className="inputext"placeholder='todos'/>
      </div>
      <div className="app">

      <ul>
      {this.state.todo.map(this.todo.bind(this))}

      </ul>
      </div>
      </div>
    );
  }
}

export default App;

Error display in the console: textDecoration undefined. Help is needed

Answer 1

You need to determine the state for the checked state of your checkbox, then enable the state for your class and dynamically add it to the list. When creating your todo, do something like this

this.setState({
            todo: this.state.todo.concat({value: todo, checked: false, textDecor: null})
          });

class App extends React.Component {

  constructor(){
    super();
    this.state={
      todo:[]
    };
  };

  entertodo(keypress){
    var todo=this.refs.newtodo.value;
    if( keypress.charCode == 13 )
    {
      this.setState({
        todo: this.state.todo.concat({value: todo, checked: false, textDecor: null})
      });
      this.refs.newtodo.value=null;
    };
  };
  todo(data,i){
    return (
     <li className={data.textDecor}>
      <input type="checkbox" onChange={this.todoCompleted.bind(this, i)}className="option-input checkbox" checked={data.checked} />
      <div key={data.id} className="item">
      {data.value}
      <button onClick={this.remove.bind(this,i)}className="destroy"></button>
      </div>

      </li>
    ); 
  };
  remove(i){
    var deletetodo = {...this.state.todo};
   this.state.todo.splice(i,1);
   this.setState({todo:this.state.todo})
 };
 todoCompleted(i){
   var todo=[...this.state.todo]
   
   if(!todo[i].checked){
     todo[i].checked = true;
     todo[i].textDecor='line'
     this.setState({ 
      todo
     });
   }
   else {
     todo[i].checked = false;
     todo[i].textDecor=null
     this.setState({
       todo
     });
   }
 };

  render() {

    return (
      <div>
      <div className="lines"></div>
      <div>
      <input type="text" ref= "newtodo" onKeyPress={this.entertodo.bind(this)}className="inputext"placeholder='todos'/>
      </div>
      <div className="app">

      <ul>
      {this.state.todo.map(this.todo.bind(this))}

      </ul>
      </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

.line {
  text-decoration: line-through;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Run codeHide result