score:1

Accepted answer

You can use something like this...

{Steps.map((lista, index) => (
  <details className='collapse'>
    <summary className='title'>{lista.title}</summary>
    <div className='description'>
      {lista.desc}
    </div>
  </details>
))}

details and summary are HTML tags for collapse.

score:0

if you are trying to change the state by the value in the state please pass a function to setState as first argument like this:

this.setState((state, props) => ({
  show: !state.show
}));

score:0

You need to create a state for each one of your list elements. Then you can change them individually.

First I'd add an id to each one of the Steps item.

const Steps = [
    {
      id: 1,
      title: '1. Download Tattoo master app (dropdown)',
      desc: 'Download the application in App Store and you acan find the wizard in any location around the world. '
    },
    {
      id: 2,
      title: '2. Enter your location',
      desc: 'Download the application in App Store and you acan find the wizard in any location around the world.'
    },
    {
      id: 3,
      title: '3. Find your tattoo master',
      desc: 'Download the application in App Store and you acan find the wizard in any location around the world.'
    }
  ]

Second I'd change my show state to an Object. That way I can store the id of each item and them tell if it is true or false.

this.state = {
  show: {}
}

And finally I'd change the function to change each item state based on its id.

toggleListItem(itemId) {
  this.setState((prevState) => ({
    ...prevState,
    show: {
      ...prevState.show,
      [itemId]: !prevState.show[itemId]
    }
  }))
}

<div key={lista.id} onClick={() => this.toggleListItem(lista.id)} className="dropdown"> ... </div>

You can see it working here: https://codesandbox.io/s/priceless-browser-uxdr5

You can have a quick explanation about using prevState here: What is prevState in ReactJS?


Related Query

More Query from same tag