DEV Community

Discussion on: Using a hook inside .map

Collapse
 
vonheikemen profile image
Heiker

I believe you're on the right track. Try changing this.

<p>{item.content}</p>
Enter fullscreen mode Exit fullscreen mode

To this.

<p>{item[content]}</p>
Enter fullscreen mode Exit fullscreen mode

Don't forget to use content inside the component.

const Accordion = ({ array, content }) =>
Enter fullscreen mode Exit fullscreen mode

And now in the accordion component pass a static text with the property name.

<Accordion array={blogs} content={'body'}/>
Enter fullscreen mode Exit fullscreen mode

If you want to get fancy you can turn the prop content into a function.

<p>{content(item)}</p>
Enter fullscreen mode Exit fullscreen mode

You could do this.

<Accordion array={blogs} content={(item) => item.body}/>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
evo9 profile image
EVO-9

Thank you. That worked perfectly. I thought I might be close but I just couldn't get over the hurdle. Thanks