Search code examples
reactjsconditional-rendering

Conditional class rendering based on state for mapped items

https://codesandbox.io/s/vjonpw8xzl (not responsive, view in new window/fullpage to see correctly)

desired result: when clicking the down(expand)icon on each card, they operate independently of each other, opening/closing the expanded menu className: expanded by toggling on the className: 'show' and className: 'hide'

whats happening: the state in app is getting updated, when the expand icon is clicked, and all of the expanded menus are opening in unison.

i understand why this is happening, i just don't know how to fix it.

if it were my own data, i'd add this to each object in state

isExpanded:false

and toggle it, but since a load of data is coming in from an API i don't know how to do this. any help is appreciated.

Solution

  • Instead of handling your state logic for isExpanded in the App component you can move it to the Character component and remove all isExpanded / toggleExpanded props.