Currently, I am in the process of developing a tasklist React page. I have introduced a new component called "Task". The code snippet below showcases Task.js and mentions that CompletedTask.js contains 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}
</>
)
}
Further, CompleteTask is an additional React element that I've developed. This element disables the checkbox and changes the text color. However, I'm encountering difficulties in appending this CompleteTask element to the end of my div (identified by id 'done-task'). The issue seems to be related to the usage of document.createElement. Is there an alternative method available for appending a custom element like mine?