Strikethrough in React

Question

How can I change the styling of a checkbox's label to be a strikethrough text when I toggle it?

These are the methods I have used to develop the rest of my system. What should I add in the fComplete method to get this functionality working and what CSS to use?

constructor(props){
    super(props);
    this.state={
      title: 'Todo List',
      act: 0,
      index: '',
      datas: []
    }
  }

  componentDidMount(){
    this.refs.input.focus();
  }

  fSubmit = (e) =>{
    e.preventDefault();
    console.log('try');

    let datas = this.state.datas;
    let input = this.refs.input.value;

    if(this.state.act === 0){   //new
      let data = {
        input
      }
      datas.push(data);
    }else{                      //update
      let index = this.state.index;
      datas[index].input = input;
    }

    this.setState({
      datas: datas,
      act: 0
    });

    this.refs.myForm.reset();
    this.refs.input.focus();
  }

  // What should I add here on this method?
  fComplete = (i) => {

  }

  fRemove = (i) => {
    let datas = this.state.datas;
    datas.splice(i,1);
    this.setState({
      datas: datas
    });

    this.refs.myForm.reset();
    this.refs.input.focus();
  }

  fEdit = (i) => {
    let data = this.state.datas[i];
    this.refs.input.value = data.input;

    this.setState({
      act: 1,
      index: i
    });

    this.refs.input.focus();
  }

  render() {
    let datas = this.state.datas;
    return (
      <div className="big-banner">
        <NavBar/>
        <div className="col-10 mx-auto col-md-5 mt-4">
          <div className="card card-body my-3 bg-dark">
            <h3 className="text-capitalize text-center text-white">Add Items</h3>
            <br/>
            <form ref="myForm" className="myForm " aria-required="true">
              <div className="input-group">
                <div className="input-group-prepend">
                  <div className="input-group-text bg-transparent text-white">
                    <i className="fas fa-book"></i>
                  </div>
                </div>
                <input type="text" ref="input" className="form-control text-capitalize" placeholder="add a todo item"></input>
              </div>
              <button type="submit" onClick={(e)=>this.fSubmit(e)} className="btn btn-block btn-primary bg-secondary mt-3 text-capitalize">add Item</button>
            </form>

            <br/><br/>
          <h3 className="text-capitalize text-center text-white">todo items</h3>
          <div className="card card-body my-3 bg-dark">
          <pre className="reverse-list">
          {datas.map((data, i) =>
          <li key={i} className="list-group-item text-capitalize d-flex
            justify-content-between my-2">
//Checkbox
            <label className="container text-center mt-1">{data.input}
              <input type="checkbox"/>
                <span className="checkmark text-dark bg-dark mt-1"></span>
            </label>
            <div className="todo-icon  mt-2">
                    <span className="mx-2 text-dark mt-xl-5">
                        <i className="fas fa-pen" onClick={()=>this.fEdit(i)}></i>
                    </span>
              <span className="mx-2 text-dark">
                        <i className="fas fa-trash" onClick={()=>this.fRemove(i)}></i>
                    </span>
            </div>
          </li>
          )}
          </pre>
        </div>
        </div>
        </div>
      </div>
    );
  }
}

I have tried adding CSS tags but I didn't get the required output. Please help me with methods I should add and other changes that should be done with code.

Answer 1

You need to pass a ref to your label and use it to control the css and pass a onClick handler (fComplete) to your checkbox.

On the piece that you render the label and checkbox, pass a ref:

  // Make sure to create the ref at the beginning
  <label className="container text-center mt-1" ref={createdRef}>{data.input}
    <input type="checkbox" onClick={fComplete}/>
    <span className="checkmark text-dark bg-dark mt-1"></span>
  </label>

On fComplete you need to use the ref assigned to the label above! A pseudo code would be something like this:

const fComplete = () => {
  if (state.labelChecked === false) {
    // This will set the strikethrough
    labelRef.current.style.textDecoration = "line-through";
  } else {
    // This will remove it
    labelRef.current.style.textDecoration = "none";
  }

  // And here you guarantee you're toggling the state
  setState({ labelChecked: !state.labelChecked });
}

I've made a very simple example here to show you how it works.