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:

importReact, { useState } from"react";
importCheckboxfrom"@material-ui/core/Checkbox";
importCompletedTaskfrom"./CompletedTask.js";

exportdefaultfunctionTask(props) {
  const task_text = props.text;

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

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

  return (
    <><CheckboxdefaultChecked={complete}color="default"inputProps={{ "aria-label": "checkboxwithdefaultcolor" }}
        onClick={taskComplete}
      />
      {complete && <CompletedTasktext={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