How to add our own react element?

Question

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 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_text = useState({task_text});

    const taskComplete = (event) => {
        event.preventDefault();
        let doneTask = document.getElementById('done-task-list')

        let new_done_task = document.createElement( <CompletedTask text={complete_text} />);

        doneTask.appendChild(new_done_task);
    }

    return (
        <>
            <Checkbox
                    defaultChecked={false}
                    color="default"
                    inputProps={{ 'aria-label': 'checkbox with default color' }}
                    onClick={taskComplete}
            />
            {task_text}
        </>
    )
}

CompleteTask is another react element that I build and what it does is it disables the checkbox and the text color is different. I am unable to append this CompleteTask element to the end of my div (with id 'done-task'). The error is with using document.createElement. Is there any alternate way I can append my self created element?

You should not use direct DOM manipulation methods (like `document.createElement`) when using React -- it's useful to think of the DOM as just a side effect of your application state. `taskComplete` should set a state variable, and the component template can read that state var to control whether to display `CompleteTask`. — Daniel Beck, Jul 14 '21 at 18:29
Does this answer your question? [Show or hide element in React](https://stackoverflow.com/questions/24502898/show-or-hide-element-in-react) — Emile Bergeron, Jul 14 '21 at 18:36

score 1 · Answer 1 · edited Jul 14 '21 at 18:43

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} />}
    </>
  );
}

score 0 · Answer 2 · answered Jul 14 '21 at 18:26

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

How to add our own react element?

2 Answers2

Linked