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 ? Commented 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? Commented 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. Commented el 27 may. 2020 a las 0:38
  • no me di cuenta que era map, bien Commented 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? Commented el 27 may. 2020 a las 0:36

Tu Respuesta

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

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