ReactJS create element from an imported element

Issue

Is there a method to use the "document.createElement()" function for an imported element?

Example:

import Box from "./Box"; // import my component

function createFunction(){
    const boxContainer = document.getElementById("boxContainer");
    const createdBox = document.createElement(<Box />); // trying to take my component and creating though a function that I call with a button, but obviously doesn't work

    boxContainer.appendChild(createdBox);
}

My code now:

import Box from "./Box";

function createFunction(){
    const boxContainer = document.getElementById("boxContainer");

    const createdBox = document.createElement("div");
    createdBox.classList.add("box");

    boxContainer.appendChild(createdBox);
}

I want to create a copy of my imported element from a button, without recalling all the things like <p> inside or add calsses etc..

Solution

As mentioned in the comments, you don't need to use the native JS way of controlling the DOM. Instead, your Box component is responsible for what to render. You do this by returning some JSX that represents what you want to render to the DOM.

I added answers to both your questions below. I hope this helps.

Question 1: How to Import and Use Components in React

A simple Box component might look like:

const Box = () => {
  return (
    <div className='box'>Box</div>;
  );
};

export default Box;

Then, you import your Box component to another component where you need it and render it inside that component like so:

import Box from './Box';

const App = () => {

  return (
    <div className='app'>
      <Box />
    </div>
  );
};

export default App;

Question 2: Performing Updates to Add New Items to a List (using State and Props with Components in React)

A useful example of what you're describing is accomplished with state and props along with an understanding of handling events and lifecycle in React.

What data is needed to describe each todo? This will determine the shape of your data for each todo in the list.

Which component should manage the list of todos? This component will keep the todos in state.

Will other components will need access to this data? Those components can receive the data as props passed from the parent component.

The below example imagines you have a Box component responsible for displaying each todo in your list. Hopefully this illustrates managing the flow of data and triggering adding new items to a list and showing them.

Object destructuring and spread syntax are used in the example as convenient ways to unpack props and add additional items to state, respectively.

import { useState } from 'react';

const Box = ({ title, description }) => {
  return (
    <div className='todo'>
      <h4>{title}</h4>
      <p>{description}</p>
    </div>
  );
};

const App = () => {
  const defaultFormFields = {
    title: '',
    description: '',
  };

  const [todos, setTodos] = useState([]);
  const [formFields, setFormFields] = useState(defaultFormFields);

  const { title, description } = formFields;

  const addTodo = (event) => {
    event.preventDefault();
    const newTodo = {
      title,
      description,
    };

    setTodos([...todos, newTodo]);
    clearFormFields();
  };

  const clearFormFields = () => {
    setFormFields(defaultFormFields);
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormFields(() => {
      return {
        ...formFields,
        [name]: value,
      };
    });
  };

  return (
    <div>
      <h2>Add Todo</h2>
      <form onSubmit={addTodo}>
        <label>Title</label>
        <input
          onChange={handleChange}
          name='title'
          value={title}
        ></input>
        <label>Description</label>
        <input
          onChange={handleChange}
          name='description'
          value={description}
        ></input>
        <button type='submit'>Add Todo</button>
      </form>
      <h2>Todos</h2>
      {todos.map(({ title, description }) => (
        <Box key={title} title={title} description={description} />
      ))}
    </div>
  );
};

export default App;

Answered By - abgregs