Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

115
Vistas
How to dynamically generate id for function components?

Hi I am creating my first application in React. The application generates css styles. It consists of components like border radius, box shadow etc. The components can be combined with each other. Variables from each component are sent via redux to an array and then rendered. I would like to add the possibility of choosing any components and combining them with each other. My problem is with component id. I don't know how to generate id dynamically depending on components order. I need it to update array in redux. There will be an option to delete any components there, so I can't type this statically. I tried to do it using map(), but each component has a different name and I have no idea how to do it. Is it even possible?

Thanks in advance and sorry for my English

const components = [<Transform id={0} />, <BorderRadius id={1} />];
const renderComponents = components.map((component, index) => component);
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I don't recommend you to map different components, but if you really have to, wrap it in a fragment like this.

const components = [<Transform />, <BorderRadius />];
const renderComponents = components.map((component, index) => (
  <React.Fragment id={index}>
   {component}
  </React.Fragment>
));

See more about fragments here

https://reactjs.org/docs/fragments.html

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda