1

Tengo un array de componentes en ReactJS y los estoy recorriendo con una función map, lo que quisiera es que, en el recorrido se enviara a cada uno de los componentes una propiedad.

Mi código luce así:

 <div>
   <StepWizard transitions={custom} >
       {props.steps.map((step, inde) => {
           return (step)
       })}
    </StepWizard>

 </div>

En return (step) quiero enviar una propiedad a ese componente step que se está renderizando, normalmente haría algo así <Step propiedad="lo que sea"/> ¿Cómo puedo enviar una propiedad ahí en map?

1
  • porque se utiliza el return ?
    – userStack
    el 27 may. 2020 a las 0:35

2 respuestas 2

2

Solo expresa el componente <Step /> con notacion JSX y no olvides asignar una propiedad key para que React pueda realizar el renderizado eficientemente.

 <div>
   <StepWizard transitions={custom} >
       {props.steps.map((step, inde) => {
           return (<Step prop={props.property} key={somekey} />)
       })}
    </StepWizard>

 </div>
3
  • porque utilizas el return?
    – userStack
    el 27 may. 2020 a las 0:35
  • @x-rw porque el método map retorna un arreglo de elementos, donde cada elemento es retornado de una función que se le pasa como argumento. el 27 may. 2020 a las 0:38
  • no me di cuenta que era map, bien
    – userStack
    el 27 may. 2020 a las 0:40
1

Suponiendo que step es un componente de React, puedes usar React.cloneElement:

<div>
   <StepWizard transitions={custom} >
       {props.steps.map((step, inde) => {
           return React.cloneElement(step, { foo: "bar" }); 
       })}
    </StepWizard>

 </div>

Citando la documentación oficial:

Clona y retorna un elemento React usando element como punto de partida. El elemento resultante tendrá los props del elemento original con los nuevos props combinados superficialmente. Los nuevos hijos reemplazarán los hijos existentes. key y ref del elemento original serán preservados.

Esto significa que así recibirías dentro de step:

function Step({ foo }) {
 console.log(foo); // bar
 return null;
}
1
  • por que se usa el return ? no seria renderizar y ya?
    – userStack
    el 27 may. 2020 a las 0:36

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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