MARK AS DONE

 INITIALLY  IS DONE IS SET AS FALSE, WE CREATE A BUTTON SUCH THAT IT IS SET TO TRUE.

  <button
              onClick={() => {
                Mark(todo.id);
              }}
            >
              Mark as Read
            </button>


  let Mark = (id) => {
    console.log(id);
    dispatch(markAsDone(id));
  };


WE ADD A LINE THROUGH WHEN IT IS SET TO TRUE.

  <li key={todo.id} >
             <span style={todo.isDone ? { textDecoration: "line-through" } : {}}>
             {todo.task} &nbsp;
           </span>



Comments

Post a Comment

Popular posts from this blog

TODO COMPONENT (PROVIDER AND USE SLECTOR)

Image
 A COMPONENT FOLDER IS CREATED  IN THE src FOLDER IN WHICH A todo.jsx IS CREATED. THE TODO COMPONENT IN THE FILE NEEDS ACCESS TO THE STORE INORDER TO PRINT THE LIST OF TASKS IN TODOS. THIS ACCESS IS PROVIDED BY A COMPONENT CALLED PROVIDER . PROVIDER THE <Provider> COMPONENT MAKES THE REDUX STORE AVAILABLE TO ANY NESTED COMPONENTS THAT NEED TO ACCESS THE REDUX STORE. IT IS IMPORTED IN APP.JS import "./App.css" ; import Todo from "./components/Todo" ; import { Provider } from "react-redux" ; import { store } from "./app/store" ; function App () {   return (     <>       < Provider store = { store } >         < Todo />       </ Provider >     </>   ); } export default App ; WHATEVER THE COMPONENT DECLARED INSIDE <Provider> GETS ACCESS TO THE STORE. STORE IS ALSO IMPORTED IN APP.JS, STORE IS PASSED AS A PROP . TO ACCESS STORE IN TODO.JS WE USE...
Read more

Deciding ACTIONS

 HERE IN TODO ACTIONS INCLUDE , ADD A TODO, MARK AS DONE, DELETE A TODO. ACTION IS AN OBJECT, IN WHICH "TYPE" IS COMPULSORY. TYPE REFERS TO THE ACTION'S TYPE. IT CAN BE ANY NUMBER,CHARACTER BUT GENERALLY WE DECLARE TYPE AS A STRING. ALONG WITH THE TYPE , ADDITIONAL INFORMATION IS ALSO SENT CALLED AS PAYLOAD. IF WE WANT TO PASS MULTIPLE INFORMATION, PAYLOAD CAN BE DEFINED AS AN OBJECT. BUT HERE,  WE DEFINE THEM AS  { type: "ADD_TODO", payload:"WRITE CODE" } {  type:"DELETE", payload:"id" } NOTE: HERE, ACTIONS ARE NOT WRITTEN AS CODE, THEY ARE IMAGINED AS OBJECTS AND ARE ASSUMED TO LOOK LIKE THIS( WRITTEN ABOVE ).
Read more