Как сделать рендер нового комонента в функции

Question

Есть функция removeTodo, она вызываеться при клике на кнопку

  function removeTodo(props) {
    console.log(props);
    <Component2341/>
   // return <h1>Привет</h1>;
  }

Хочу при каждом вызову данной функции создавать компонент Component2341/> Пыталась сделать через ReactDOM, но не получилось

  const element = <removeTodo name="Алиса" />;
  ReactDOM.render(
    element,
    document.getElementById('root')
  );

Answer 1

import {Fragment, useState} from 'react';

function Component(properties) {
  return (
    <div>{properties.name}</div>
  );
}

function Application() {
  const [components, setComponents] = useState([]);

  function handleCreateComponent() {
    setComponents((previousState) => ([
      ...previousState,
      {name: String(Math.random()).substring(2, 16)}
    ]));
  }

  return (
    <Fragment>
      <button onClick={handleCreateComponent}>Create a component</button>

      {components.map((component) => (
        <Component {...component} />
      ))}
    </Fragment>
  );
}

БЛОГ НА HUSL

Как сделать рендер нового комонента в функции

Ответы (1 шт):