2

Estoy avanzando en mi aprendizaje de React, y me he atascado en un renderizado

Vale. Mi render se ejecuta bien con lo siguiente:

root.render(<div className="creado">
                <Contador />
            </div>);
  

Contador es una función que me devuelve el html necesario para unos botones y un clásico contador realizado con cambios de estado, utilizando el onClick en el tag de los botones. Hasta aquí todo perfecto.

Los problemas llegan cuando quiero iterar las veces que aparece el contador, que deben de variar según el dato llegado por el user mediante un prompt.

Para esto, creo el promt y capturo su valor en una vinculación al cargar la ventana:

window.addEventListener("load", () =>{
const Valor = prompt("Introduzca número","2")}
)

Y además, creo otro vínculo con la cadena que me interesa iterar X veces

const componente = <Contador />;

De momento, bien. Tengo el dato "componente" que es igual que la anterior cadena:

Funciona correctamente:

root.render(<div className="creado">
                    {componente}
                </div>);

Y aquí está mi pregunta. Cómo demonios itero ese componente mediante su asignación?

Si el user introduce "3", lo que busco es que el render haga:

root.render(<div className="creado">
                {componente}
                 {componente}
                {componente}
            </div>);

Es decir, que "componente" se escriba entre las div del render las veces que indique la const Valor. En este caso, crear 3 contadores, como yo quiero

He probado de todo, y nada tiene éxito. Todo parece interferir con JSX. ni pasarlo a string y hacer repeat, ni con Symbol, nada de bucles for... o funciones dentro del render. Fuera he intentado, pero al integrar el componente en una función me es complicado dar ese formato que precisa para el render.

¿Alguien puede ayudarme en desfacer este entuerto?

No he probado con props, porque entiendo que para este caso no me hacen falta. ¿Es posible que haya un comando específico en React para esto? He de decir que acabo de empezar con React, haciendo tutoriales e incorporando mis ideas, además de la inestimable práctica que adquiere uno con js. He visto poco más que el render, las props y los estados. Quizás me esté adelantando pero no me puedo quedar con esta duda.

Un saludo y gracias


Actualización


Después de decenas de horas, sigo investigando para descubrir de que forma

"multiplicar" el <Contador /> dentro de un root.render()

en el siguiente código completo de mi experimento:

https://stackblitz.com/edit/web-platform-ytvjwt?file=index.html

@PabloLozano a tratado de ayudarme, pero no conseguimos llegar al resultado que busco. Voy a mostrar mediante imágenes lo que quiero: (huelga decir que los estilos, en este caso, no son prioritarios) normal Lo de arriba es un contador busco Aquí hay 3 contadores pero no con 3 contadores... con los que introduzca el user en el prompt

Y quiero saber si es posible de la manera descrita, nada de props ni hooks ni keys, que aun no lo he visto, solo con el js.

En lugar de llamar a <Contador /> quiero llamar a la repetición de const componente = <Contador />; para en el render hacer un root.render(<div className="creado">{Contador}</div>);

y poder definir así cuantos jugadores (por ende, contadores) habrá. El contador es el conjunto de botones y el total de cada bloque.

He intentado de todo. Pasar a array el componente, hacer bucles, agregar componentes al array mediante bucles... nada funciona. En cuanto tiene que pasar el componente, debe de dejar de leerlo como jsx... Y fuera del render nada parece funcionar. En el render, las funciones no hacen lo que deberían con datos jsx, o eso me parece en mi caso.

Intento probar soluciones según avanzo en mi formación autodidacta de React... pero utilizar herramientas que aún no he estudiado no me parece útil. De momento quiero saber si lo que planteo tiene solución sin más herramientas que las utilizadas hasta ahora.

Muchas gracias!

1 respuesta 1

0

Puedes simplemente tener un bucle donde vas generando los elementos que necesitas:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.cantidad= props.cantidad;
  }
  
  generarElementos() {
    const elementos=[];
    for (let i=0;i<this.cantidad;i++) {
      elementos.push(
        <div>
          <div>Elemento {i}</div>
          <button >Un boton</button>
        </div>
      )
    }
    return elementos;
  }
 
  render() {
    return this.generarElementos();
  }
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <MyComponent cantidad="3" />)
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>

Es fácil una vez que conoces como funciona la sintaxis (y semántica) de JSX, pero no te preocupes si tardas un tiempo en acostumbrarte.

En este ejemplo he usado un elemento "nativo" de HTML, pero puedes anidar componentes creados en otra clase sin problema:

elementos.push(<MiElemento miProp="datos" />);

Puedes encontrar más información en la documentación oficial, con algún ejemplo: https://reactjs.org/docs/lists-and-keys.html

13
  • Muchas gracias, Pablo. Desde luego solo me faltó probar esa variante de bucle, crear ese array vacío... Muy interesante. Ahora bien, me surge otra duda que espero me solventes: Quizás el problema radica en que utilizo las últimas versiones de las bibliotecas de react (18.2 creo) y las que tu usas son 16, y en estas actualizadas el ReactDOM.render ya no funciona.
    – Paronirium
    el 24 ago. 2022 a las 13:08
  • Existe algún método con el root.render para hacer lo mismo? ¿Es imperativo utilizar las ultimas librerías?¿La 16 tiene algo en particular? ¿Como elegir la versión adecuada para cada proyecto?
    – Paronirium
    el 24 ago. 2022 a las 13:11
  • he usado la 16 porque es la que añade StackOverflow por defecto en los "fragmentos", pero la sintaxis debería ser la misma. Mi recomendación es usar la versión estable más reciente el 24 ago. 2022 a las 13:15
  • He actualizado para usar la última versión el 24 ago. 2022 a las 13:18
  • Muchas gracias. Pinta bien. Voy a probarlo y te digo
    – Paronirium
    el 24 ago. 2022 a las 13:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.