CODEWITHSUNDEEP
reactjsbootstrap-modal
Spectrum
Spectrum

Reputation: 340

Modal using Bootstrap doesn't update content

In my app, I display a list of items which have extra information (which isn't displayed) and a button next to each item to 'View' more info. I want to display that extra information inside a modal. I successfully implemented the modal and it displays the information the way I want it to.

But the problem is that when I click the button of the second list item, the information isn't being updated, it still displays old information (of the first item). How do I resolve this? Why does this happen?

Calling a map function from another class : 

 <List>
    this.props.enrolledClasses.map(enrolledClass => (
     <ClassesPeek
      title="Overview"
      enrolledClass={enrolledClass}
     />
 </List>

ClassesPeek : 

      <List.Item>
      <span>{this.props.enrolledClass.name}
      <button type="button" className="ui compact primary button mt-3" data-toggle="modal" data-target="#details">
        View
      </button> 
      <div class="modal" id="details">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <center><h4 class="modal-title">{this.props.enrolledClass.name}</h4></center>
              <button type="button" className="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
              {this.props.enrolledClass.description}
            </div>
          </div>
        </div>
      </div> 
     </span>
    </List.Item>

So in the above code, when I click the 'View' button for the second list item, the modal still shows the name and description of the first item.

Upvotes: 3

Views: 1803

Answers (2)

Rukayat Odukoya
Rukayat Odukoya

Reputation: 116

It will always show the old one because you didn't specify which one it should view by passing a unique key (id) to the modal. Update your code to the below snippet then it would work as expected

<List.Item>
  <span>{this.props.enrolledClass.name}
  <button type="button" className="ui compact primary button mt-3" data-toggle="modal" data-target={`#details${this.props.enrolledClass.id}`} id={`#details${this.props.enrolledClass.id}`}>
    View
  </button> 
  <div class="modal" id={`details${this.props.enrolledClass.id}`}>
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <center><h4 class="modal-title">{this.props.enrolledClass.name}</h4></center>
          <button type="button" className="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          {this.props.enrolledClass.description}
        </div>
      </div>
    </div>
  </div> 
 </span>
</List.Item>

Upvotes: 3

raj
raj

Reputation: 124

I think the main reason for such scenario is your JavaScript code that opens the modal onthe button click. Can you please check that once. I would suggest always use ref for such usecase instead of id.

Upvotes: -2

Related Questions