Bootstrap 4 collapse not working with map in ReactJS

Question

I am trying to add collapse to a project where it will display all the available content when Read More button (which is working for collapsing button) got clicked. But, it only collapsing for the first item that fetched from the database, and for every other Read More button click it is not working for that particular item rather it keeps opening and closing the first item. Below is my code that I am trying with. I need help with this issue. Thanks very much.

<div>
  <div className="container mt-3">
    <h1 className="text-justify mb-4">The Blogstar Blog</h1>
    <div>
      {data && data.length > 0 ? (
        data.map((item, index) => {
          return (
            <div className="card p-3 mt-3" key={index}>
              <div className="d-flex">
                <div className="text-justify mr-5">
                  <h3>{item.title}</h3>
                </div>
                <div className="d-flex ml-auto ">
                  <p className="mt-2 mr-2">
                    <img
                      src="https://img.icons8.com/material-rounded/18/000000/facebook-like.png"
                      alt="facebook-like-icon"
                    />{' '}
                    {item.upvotes}
                  </p>
                  <p className="mt-2 mr-2">
                    <img
                      src="https://img.icons8.com/material-rounded/18/000000/thumbs-down.png"
                      alt="thumbs-down-icon"
                    />{' '}
                    {item.downvotes}
                  </p>
                  <p className="mt-2">
                    <img
                      src="https://img.icons8.com/ios-filled/18/000000/comments.png"
                      alt="comments-icon"
                    />{' '}
                    {item.comments}
                  </p>
                </div>
              </div>
              <div className="d-flex">
                <p>
                  <img
                    src="https://img.icons8.com/ios-glyphs/18/000000/clock.png"
                    alt="clock-icon"
                  />
                  {formatDate(item.createdAt)}{' '}
                </p>
                <p>
                  <img
                    className="ml-2"
                    src="https://img.icons8.com/material-rounded/18/000000/writer-male.png"
                    alt="author-icon"
                  />{' '}
                  <strong>{item.author.name}</strong>
                </p>
              </div>
              <div className="text-justify">
                {ReactHtmlParser(item.content.substring(0, 150))}
                <button
                  class="btn btn-primary"
                  type="button"
                  data-toggle="collapse"
                  data-target="#collapseExample"
                  aria-expanded="false"
                  aria-controls="collapseExample">
                  Read More
                </button>
                <div class="collapse" id="collapseExample">
                  {ReactHtmlParser(item.content)}
                </div>
              </div>
            </div>
          );
        })
      ) : (
        <div>Nothing in database</div>
      )}
    </div>
  </div>
</div>

@cyonder I wanted to try the project with Bootstrap that's why I am not using React Bootstrap. — Jakaria Ridoy
– Jakaria Ridoy, Commented Jul 22, 2020 at 3:31
@Salva Knyazev I wanted to try the project with Bootstrap that's why I am not using React Bootstrap. — Jakaria Ridoy
– Jakaria Ridoy, Commented Jul 22, 2020 at 3:31

bas · Accepted Answer · 2020-07-21 18:48:34Z

2

Change the data-target on your collapse button to this:

data-target={`#collapseExample${index}`}

and your collapse div to this:

<div class="collapse" id={`collapseExample${index}`}>
   // ... content
</div>

The problem was that your collapse id and button data-target were static. These values need to be dynamic depending on the data you're mapping through. Otherwise your button will always target the same element. This explains why every button collapses/expands the same div.

edited Jul 21, 2020 at 18:48

answered Jul 21, 2020 at 18:36

bas

15.2k7 gold badges28 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jakaria Ridoy Over a year ago

Thanks Very much for your help. It works as expected.

Collectives™ on Stack Overflow

Bootstrap 4 collapse not working with map in ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related