Dado que tengo un componente que acepta una función como accesorio (es decir (item) => ({ value: item }) quiero modificar el valor de retorno de las funciones dentro del componente que lo acepta. Esencialmente, quiero envolver el retorno de la función valor en un elemento JSX Así:
const callback = ({ foo, bar }) => ({ prop1: foo, prop2: bar }) const MyComponent = ({ callback }) => { const someItems = [{name: 'one', foo: 1, bar: 1}, {name: 'two', foo: 2, bar: 2}] // modify callback in here to instead return <InternalComponent prop1={foo} prop2={bar} /> // ie I want to pass the function's return value to InternalComponent as props // const callback = ({ foo, bar }) => { // return <InternalComponent // prop1={foo} // prop2={bar} // /> // } return someItems.map(callback) }es posible?
Si entiendo su problema correctamente, puede crear una nueva función dentro de MyComponent para distribuir el objeto que proviene de la callback de llamada en InternalComponent y pasar esa nueva función a su someItems.map :
const MyComponent = ({ callback }) => { const someItems = [{name: 'one', foo: 1, bar: 1}, {name: 'two', foo: 2, bar: 2}]; const newCallback = (someItem) => { const props = callback(someItem); return <InternalComponent ...props /> } return someItems.map(newCallback); }