How to render an array of JSX fragments? - reactjs

Question

I'm relatively new to React and trying to render an array of JSX fragments that all look like this.
<>
<div className="tourCard" key={address.name}>
<h3 className="tourCard__header">{address.name}</h3>
<div className="tourCard__capacity">Capacity: {foundUser.capacity}</div>
{foundUserAddress}
{foundUserAddress2}
<section className="tourCard__cityStateZip">
<div className="tourCard__city">{foundUser.city}</div>
<div className="tourCard__state">{foundUser.state}</div>
{foundUserZip}
</section>
<h5 className="tourCard__blurbHeader">About Us</h5>
{foundUserBlurb}
{socialMediaButtonClicked ? (
<>
{foundUserSocialMedia}
</>
) : (
<>
<button onClick={() => {
socialMediaButtonClicked = true
}}>Social media</button>
</>
)}
</div>
</>
I'm pushing them into an array exactly as above, and I'm struggling with the right format in the return statement below to get them to render.
I've tried
return (
<>
<section className="tourSection">
{tourCards}
</section>
</>
)
and
return (
<>
<section className="tourSection">
{tourcards.map(tourCard => {
return(
{tourCard}
)
}
</section>
</>
)
But neither were successful. Where am I going wrong?
Complete page code below:
import React, {useContext, useState} from "react"
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps'
import { AddressContext } from "../addresses/AddressProvider"
import { UserContext } from "../user/UserProvider"
import { render } from '#testing-library/react'
export default (props) => {
const { addresses } = useContext(AddressContext)
const { users } = useContext(UserContext)
let tourCards = []
const PlanMap = withGoogleMap(props => (
<GoogleMap google={window.google} defaultCenter = { { lat: 39.5, lng: -98.35 } }
defaultZoom = { 4 }>
{
addresses.map(address =>
<>
<Marker
key={address.id}
position={{
lat: address.address.lat,
lng: address.address.lng
}}
label={{
text: "Hello World!",
fontFamily: "Arial",
fontSize: "14px",
}}
>
<InfoWindow
key={address.id}>
<>
<span>{address.name}</span>
<div>
<button onClick={() => {
let foundUser = users.find(user => user.name === address.name)
let foundUserAddress = ""
if (foundUser.hasOwnProperty("address") && foundUser.hasOwnProperty("addressPublic") && foundUser.addressPublic === true) {
foundUserAddress = <>
<div className="tourCard__address">{foundUser.address}</div>
</>
}
let foundUserAddress2 = ""
if (foundUser.hasOwnProperty("address2") && foundUser.hasOwnProperty("address2Public") && foundUser.address2Public === true) {
foundUserAddress2 = <>
<div className="tourCard__address2">{foundUser.address2}</div>
</>
}
let foundUserZip = ""
if (foundUser.hasOwnProperty("zip") && foundUser.hasOwnProperty("zipPublic") && foundUser.zipPublic === true) {
foundUserZip = <>
<div className="tourCard__zip">{foundUser.zip}</div>
</>
}
let foundUserBlurb = ""
if (foundUser.hasOwnProperty("blurb") && foundUser.hasOwnProperty("blurbPublic") && foundUser.blurbPublic === true) {
foundUserBlurb = <>
<div className="tourCard__blurb">{foundUser.blurb}</div>
</>
}
let socialMediaButtonClicked = false
let foundUserWebsite = ""
let foundUserFacebook = ""
let foundUserInstagram = ""
let foundUserTwitter = ""
let foundUserSocialMedia = <>
<section className>
{foundUserWebsite}
{foundUserFacebook}
{foundUserInstagram}
{foundUserTwitter}
</section>
</>
if (foundUser.webPublic === true) {
if (foundUser.hasOwnProperty("website")) {
foundUserWebsite = <>
<div className="tourCard__website">{foundUser.website}</div>
</>
}
if (foundUser.hasOwnProperty("facebook")) {
foundUserFacebook = <>
<div className="tourCard__facebook">{foundUser.facebook}</div>
</>
}
if (foundUser.hasOwnProperty("instagram")) {
foundUserInstagram = <>
<div className="tourCard__instagram">{foundUser.instagram}</div>
</>
}
if (foundUser.hasOwnProperty("twitter")) {
foundUserInstagram = <>
<div className="tourCard__twitter">{foundUser.twitter}</div>
</>
}
}
tourCards.push(
<div className="tourCard" key={address.name}>
<h3 className="tourCard__header">{address.name}</h3>
<div className="tourCard__capacity">Capacity: {foundUser.capacity}</div>
{foundUserAddress}
{foundUserAddress2}
<section className="tourCard__cityStateZip">
<div className="tourCard__city">{foundUser.city}</div>
<div className="tourCard__state">{foundUser.state}</div>
{foundUserZip}
</section>
<h5 className="tourCard__blurbHeader">About Us</h5>
{foundUserBlurb}
{socialMediaButtonClicked ? (
<>
{foundUserSocialMedia}
</>
) : (
<>
<button onClick={() => {
socialMediaButtonClicked = true
}}>Social media</button>
</>
)}
</div>
)
console.log(tourCards)
debugger
}}
>
Add to tour
</button>
</div>
</>
</InfoWindow>
</Marker>
</>
)
}
</GoogleMap>
));
return (
<>
<div>
<PlanMap
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px`, width: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
<section className="tourSection">
{tourCards}
</section>
</>
)
}

Answer 1

<> ... </> is not an array. Depending on how and where your tourCards are created you could do something like:
var tourCards = [];
tourCards.push(<div className="tourCard"> ... </div>);
// ... more tourCards.push()
return (
<>
<section className="tourSection">
{tourCards}
</section>
</>
);

Answer 2

As I said in the comments, I think your problem is just that your component doesn't re-render after you update tourCards. And even more, since tourCards is redefined as an empty array each time your component re-renders, it won't contain whatever you try to put into it. So you should use useState to keep track of it.
When working with arrays using react hooks it's a good idea to treat them as immutable and create a new array each time you set the state using array spreading
const [arr, setArr] = useState([])
// somewhere in an effect or callback
setArr(prevArr => [...prevArr, newValue]) // this is the same as arr.push
setArr(prevArr => [newValue, ...prevArr]) // this is the same as arr.unshift
setArr(prevArr => [...newArr, ...prevArr]) // this is arr.concat
Here's a working example you should be able to run right here on SO:
const {useState} = React
function App() {
const [tourcards, setTourcards] = useState([])
const addTourCard = function() {
// Do whatever you need to do here
const card = <div key={`card-${tourcards.length}`}>Card</div>
setTourcards(cards => [...cards, card])
}
return (
<div>
<button onClick={addTourCard}>Click Me</button>
<div>{tourcards}</div>
</div>
)
}
ReactDOM.render(<App />, document.querySelector("#root"));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>