How to dynamically add a node to the DOM?

Question

React

There is a file in which I create an element:
createTodo.js

import React from "react";

export default function createTodo() {
  const todoInput = document.getElementById("input");
  return (
    <li>
      <span className="todos_block-text">{todoInput.value}</span>
      <span className="todos_block-trash"></span>
    </li>
  );
}

Next, I want to add the given component to the DOM inside document.querySelector('.todos_block') at the very end:
addTodo.js

import createTodo from "./";
import React from "react";

export default function addTodo() {
  document.querySelector('.todos_block').append(createTodo());  <----- Пример с append
}

How do I add an element to the DOM dynamically in addTodo.js ?

Answer 1

Judging by getElementById and querySelector , you clearly do not understand how to work with React. Start with simple tutorials, for example, Yuri Bura has a good course.