Encuentro esta sintaxis tan extraña.
<> {items.map((item, i) => { return <ItemComponent key={i} {...{ [resourceName]: item }} />; })} </> ¿Puedes explicarlo por favor? Sé que en el componente principal ahora Parent name prop, pero IDK, ¿cómo sucedió esto?
No tengo el contexto completo, así que aquí está mi conjetura:
resourceName es una variable que describe qué accesorio se establecerá en ItemComponent.
no puede escribir resourceName={item} porque entonces ItemComponent tendría una propiedad "resourceName" en lugar de cualquier valor almacenado dentro de resourceName .
Entonces, la solución para esto es crear un objeto con solo una clave que sea el valor de resourceName asociado al objeto del item :
const itemComponentProps = { [resourceName]: item; };Si no está familiarizado con esta sintaxis, es para usar claves dinámicas en objetos.
ejemplo:
const dynamicKey = 'foo'; const obj = { [dynamicKey]: 'bar' } console.log(obj[dynamicKey]); // bar console.log(obj.foo); // bary extiendes este objeto al componente:
<ItemComponent key={i} {...itemComponentProps} />