How To Add Our Own React Element?

I am working on a tasklist react page. I created a different element called 'Task'. The following code is of Task.js and CompletedTask.js has also somewhat similar code. import Rea

Solution 1:

You should not do this using DOM manipulation and you are not using useState correctly. I would do something like this:

import React, { useState } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import CompletedTask from "./CompletedTask.js";

export default function Task(props) {
  const task_text = props.text;

  const [complete, setComplete] = useState(false);

  const taskComplete = () => {
    // do anything else you need to complete the task
    setComplete(true); //will mark your checkbox as checked and show the completed task component
  };

  return (
    <>
      <Checkbox
        defaultChecked={complete}
        color="default"
        inputProps={{ "aria-label": "checkbox with default color" }}
        onClick={taskComplete}
      />
      {complete && <CompletedTask text={task_text} />}
    </>
  );
}

Solution 2:

react element is different from DOM element and they should convert to DOM Element and inject to page using React.createElement(). I am new to react but suggest that use your component:<CompletedTask> in component:(<taskCompelete>) (in return statement) and use logical rendering to show <CompletedTask> if there is one