How to render Multiple element in a same div in react JSX

Question

i am trying to fetch the data from firestorm and create same number of card as the size of collection. But if i use render just show a single card in the div.

    import React from 'react'
import {
  CWidgetDropdown,
  CRow,
  CCol,
  CDropdown,
  CDropdownMenu,
  CDropdownItem,
  CDropdownToggle,
  CHeaderNavItem,
  CHeaderNavLink,
  CHeaderNav,
  CCard
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import {Satar} from 'react-icons/fa'
import StarRatings from 'react-star-ratings'
import firebase from '../pages/login/firebase'
import ReactDOM from 'react-dom';
const styleCard={
  boxShadow:'5px 10px 20px 1px rgb(0,0,0,0.253)',
  height:'90px',
  marginTop:'20px'
}

const styleImg= {
  marginTop:'13px',
  marginLeft:'10px'
}
const styleHeading={
  marginTop:'-40px',
  marginLeft:'60px'
}

const styleP={
   marginLeft:'60px'
}

const stylebtn={
      width:'150px',
      marginTop:'-50px',
      marginLeft:'870px',
      
}
const styletitle={
    marginTop:'0px',
    marginLeft:'450px'
}




const db = firebase.firestore();

const userData=[];

var id='new1'

var val=0;

db.collection('reviews').get().then((snapshot) => {

     snapshot.docs.forEach(doc=>{
     const card=  React.createElement(CCard,{style:styleCard},
                  React.createElement("strong",{marginTop:'-40px',
                  marginLeft:'60px'},doc.data().name),
                  React.createElement("p",{marginLeft:'60px'},doc.data().comment),
                  React.createElement(StarRatings,{
                  starRatedColor:"#fcf003",
                  starDimension:"20px",
                  starSpacing:"5px",
                  width:'150px',
                  marginTop:'-50px',
                  marginLeft:'870px',
                  rating:doc.data().rating, },"")
      )
     
      ReactDOM.render(card,document.getElementById(id))
      id='new2'
      console.log(doc.data())
     })
    
     
})
const WidgetsDropdown = () => {
  // render
  return (
    

            <div id="main">
               
               <strong className="h4" style={styletitle } >Reviews</strong>

           
         <div id="new1"></div>
         <div id="new2"></div>
          
       </div>
      
    
    
    
  )
}

export default WidgetsDropdown

to over come this problem for two cards i'm using id='new1' for first card if render first card then change the value of id and set id='new2' one thing for understanding in this method i'm creating two div's with id id='new1' and id='new2' its not a complete solution i think theirs an other method for this thing that i don't .

Eugene · Accepted Answer · 2020-07-14 21:35:42Z

1

I would recommend to replace snapshot.docs.forEach with snapshot.docs.map:

  const docList = snapshot.docs.map((doc, index)=>  <div id={index}> ... </div>)
  return (
      <div>
      {docList}
      </div>
    );

answered Jul 14, 2020 at 21:35

Eugene

1,54310 silver badges23 bronze badges

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

Comments

ludwiguer · Accepted Answer · 2020-07-14 21:37:55Z

1

You need an array of objects

const cards = [];
snapshot.docs.forEach(doc=>{ 
  const card = React.createElement();
  cards.push(card);
})

ReactDOM.render(cards,document.getElementById(id))

answered Jul 14, 2020 at 21:37

ludwiguer

2,2552 gold badges17 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to render Multiple element in a same div in react JSX

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related