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)
Lo de arriba es un contador
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!