Agregar componentes dinámicos en React

Para cualquier aplicación React, es muy común usar elementos dinámicos. La característica más interesante de los elementos dinámicos es que el usuario no necesita actualizar la página web para ver los cambios.

Por ejemplo, si necesita más de un campo de entrada, puede crear fácilmente un nuevo campo de entrada haciendo clic en un botón.

En este breve artículo, veremos cómo podemos incluir elementos dinámicos en React JS, y discutiremos el tema usando los ejemplos y explicaciones necesarios para facilitar el tema.

Agregar componentes dinámicos en React

Para agregar elementos dinámicos para una aplicación web, necesitamos crear un archivo JS separado con los componentes básicos como los siguientes,

Código - App.js:

import react from 'react';

class DynamicComponent extends react.Component {
  constructor() {
    super() {
      this.state = { addNew: [{}] }
    }
  }
  addLine() {
    this.setState(({addNew: [...this.state.addNew, {}]}))
  }
  render() {
        return(
            <div>
                <center>
                    {this.state.addNew.map(()=>(
                        <h2>This is a dynamic text</h2>
                    ))}
                    <button onClick={()=>this.addLine()}>Add new</button>
                </center>
            </div>
        )
    }
  }
  export default DynamicComponent;

Primero importamos los archivos y paquetes necesarios para nuestra aplicación en el archivo de ejemplo anterior. Luego creamos una clase que se extiende a react.Component.

Ahora analicemos las partes importantes de la estructura de clases. Primero, la clase constructor() contiene el super(), donde definimos la matriz de estadísticas.

La función llamada addLine() que iniciará cada elemento. Por último, tenemos la función render(), que organizará toda la interfaz de usuario, y dentro de esta función, creamos un mapa() para mapear el estado y definir el código que debe implementarse dinámicamente.

Después de eso, creamos un elemento de botón, y el evento onclick de la función es addLine().

Miremos nuestro archivo index.js, y este archivo requiere algunos cambios de la siguiente manera.

Código - index.js:

import './index.css';

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import DynamicComponent from './component';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DynamicComponent />
  </React.StrictMode>
);
reportWebVitals();

Después de importar el archivo JS en el archivo JS anterior, simplemente pasamos la clase. Obtendrá el siguiente resultado en su consola cuando ejecute el ejemplo anterior.

Producción:

Los códigos de ejemplo compartidos en este artículo están escritos en el proyecto React JS. Su sistema debe contener la última versión de Node JS para ejecutar un proyecto React.