How to display data from .map function in multiple <div>s

Question

I've been going over this code for a while now.This is the process:

I'm retrieving some data from a server. These data will displayed on cards using the .map function.

The problem is: They are displaying on the cards but not on the attached modals

Focus on the code blocks with double slash comments "//"

// I started with the map function here 
if(this.state.isLoading === false) {
this.state.data.map((datii,i) => {

  if(isClicked){
    generateButton =    
            <button type="button" className="btn btn-primary" id="postStatus"
                                data-dismiss="modal" data-toggle="modal" data-target={"#exampleModal2"} 
                            onClick={this.handleGeneratedClick} aria-label="Close">
                            Post on social media
                        </button>

    generated = <div className="row">
                  <p className="col-3"><b>Generated Link:</b></p>
                  <p className="col-9">The generated link</p>
                </div>
  }else {        
    generateButton = <button type="button" className="btn btn-primary" onClick={this.handleGeneratedClick}>
                        Generate link
                      </button>
    generated = <div/>
  }

  return(

  content.push(
    <div className="contents" key={datii.campaignId}>



                //datii not showing visible here
                ////modal 1 div

               <div className="modal fade" id={"exampleModal"} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
               <div className="modal-dialog" role="document">
                 <div className="modal-content">
                   <div className="modal-header">
                     <h5 className="modal-title" id="exampleModalLabel"><b>CAMPAIGN DETAILS</b></h5>
                     <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                     </button>
                   </div>
                   <div className="modal-body" >
                       <div className="container-fluid text-left">
                          <div className="row">
                             <p className="col-3"><b>Name:</b></p>
                             <p className="col-9">{datii.campaignName}</p>
                           </div>
                           <div className="row">
                             <p className="col-3"><b>Duration:</b></p>
                             <p className="col-9">{datii.startTime + " - " + datii.endTime }</p>
                           </div>
                           <div className="row">
                             <p className="col-3"><b>Hashtags:</b></p>
                             <p className="col-9">{datii.hashTags}</p>
                           </div>
                           <div className="row">
                             <p className="col-3"><b>Image(s):</b></p>
                             <div className="col-9">
                              <div className="row">


                              <img src="" className="img-fluid mx-auto d-block col-6" alt="campaigns" />
                              <img src="" className="img-fluid mx-auto d-block col-6" alt="campaigns" />
                              </div>
                             </div>
                           </div>


                            {generated}
                       </div>
                   </div>


                      <div className="modal-footer align-self-center">
                        {generateButton}
                     </div>
                 </div>
               </div>
             </div>


                    //and here either
                    //modal 2 div


             <div className="modal fade" id={"exampleModal2"+i} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
               <div className="modal-dialog" role="document">
                 <div className="modal-content">
                   <div className="modal-header">
                     <h3 className="modal-title" id="exampleModalLabel2"><b>Share on social media</b></h3>
                     <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                     </button>
                   </div>
                   <div className="modal-body">
                       <div className="container-fluid">
                          <div className="row">
                             <h5 className="col text-left p-0"><b>{datii.campaignName}</b></h5>
                           </div>
                           <div className="row">
                            <textarea className="form-control" id="exampleFormControlTextarea1" rows="3">
                            </textarea>
                           </div>

                   <div className="mb-4">
                   <div className="row">

                <button type="button" className="btn btn-primary col-5">Post</button>
                    </div>
                   </div>
                 </div>
               </div>
             </div>



            //datii is only visible here
            //card div


            <div className="card text-center">
            <div className="card-body">
              <h5 className="card-title"><b>{datii.campaignName}</b></h5>
                <p className="card-text">{this.state.data[i].samplePost}</p>
              <button className="btn btn-primary viewbtn" data-toggle="modal" data-target={"#exampleModal"+i}>View</button>
            </div>
            </div>
          </div>

Add the relevant code please

Shubham Khatri
– Shubham Khatri

2019-01-17 09:31:02 +00:00
Commented Jan 17, 2019 at 9:31 — Shubham Khatri
– Shubham Khatri, Commented Jan 17, 2019 at 9:31
show what you tried - stackoverflow.com/help/how-to-ask

Tushar Walzade
– Tushar Walzade

2019-01-17 09:36:26 +00:00
Commented Jan 17, 2019 at 9:36 — Tushar Walzade
– Tushar Walzade, Commented Jan 17, 2019 at 9:36
okay... i'll add it now

onoRIODE
– onoRIODE

2019-01-17 13:59:34 +00:00
Commented Jan 17, 2019 at 13:59 — onoRIODE
– onoRIODE, Commented Jan 17, 2019 at 13:59

hamed hossani · Accepted Answer · 2019-01-17 13:01:18Z

1

You gotta show us what your code !

But going on a hunch, This is how you can render multiple divs from .map function

    return this.state.serverresponse.map(x=> (
      <div>
          <ExampleComponent
              prop1={x.id}
              prop2={x.data}
              prop3={x.binary}
              prop4={x.label}

          />
        </div>
      ));

this.state.serveresponse is where im storing the result from my server, which in my case is an array of objects.

edited Jan 17, 2019 at 13:01

hamed hossani

1,0022 gold badges16 silver badges34 bronze badges

answered Jan 17, 2019 at 9:57

mastershefi

1531 silver badge13 bronze badges

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

Collectives™ on Stack Overflow

How to display data from .map function in multiple <div>s

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related