lundi 8 juin 2020

How to use checkbox to complete tasks in a to do list?

I am a newbie in React and I've been working on a simple To-do list with State Hooks. I am having trouble to assign style= with the function

function Checkbox(){ const [checked, setChecked] = useState(false); return ( <label> <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} /> </label> ); } in order to complete some tasks. The task should be default "Task" but once checked, I want the task to be crossed out: "T̶a̶s̶k̶". I will post for you my attempt:

import React, {useState} from 'react';

function TodoList({ todo, index, completeTodo, removeTodo}) {
    return (
      <div className="todo"> 
        <Checkbox />    
            <div style= >
                {todo.text}
            </div>
        <div>
          <button class = "button" onClick={() => removeTodo(index)}>Delete Task</button>
        </div>
      </div>
    );
  }

  function Checkbox() {
    const [checked, setChecked] = useState(false);
  
    return (
      <label>
        <input type="checkbox"
          checked={checked}
          onChange={() => setChecked(!checked)}
        />
      </label>
    );
  }

export default TodoList;



Aucun commentaire:

Enregistrer un commentaire