Reusing markup in reactJS and best practice - reactjs

Question

I am learning react and I am attempting to reuse code (I'm told that's one of the great things about react). I currently have the following markup with the data sets imported like so. I have attempted to loop through the data set using .map but its proving to be difficult. Is there a best practice (slightly discussion focued rather than just answerable as stack overflow outlines, but I'm attempting to learn) when it comes to looping through data. Thanks
JS
import {recommendedActivities3} from '../../data/mocks'
import {recommendedActivities4} from '../../data/mocks'
<Link className={`PageCell recommended`} to={`/places/top-activities/${recommendedActivities3.id}`}>
<div className={`restaurantCard-main recommended`}>
<span className="host-recommendation-text">Host recommended</span>
<div className={`restaurantCard recommended`}>
<img className={`photo activity`} src={recommendedActivities3.image_url} size="small" alt="activities" />
<div className={`restaurantCard-right`}>
<div className="name">{recommendedActivities3.name}</div>
<div className="description"><p>{recommendedActivities3.description}</p></div>
</div>
</div>
</div>
</Link>
<Link className={`PageCell recommended`} to={`/places/top-activities/${recommendedActivities4.id}`}>
<div className={`restaurantCard-main recommended`}>
<span className="host-recommendation-text">Host recommended</span>
<div className={`restaurantCard recommended`}>
<img className={`photo activity`} src={recommendedActivities4.image_url} size="small" alt="activities" />
<div className={`restaurantCard-right`}>
<div className="name">{recommendedActivities4.name}</div>
<div className="description"><p>{recommendedActivities4.description}</p></div>
{/*<CellContent recommendedActivities={recommendedActivities} recHeight={recHeight} normalHeight={normalHeight} />*/}
</div>
</div>
</div>
</Link>
Data
Below I have provided the structure of my data for reference. Not sure if it is necessary.
export const recommendedActivities4 = {
description: 'One of the best spots in SFs Famous: North Beach. Grab a coffee and just people watch for hours!',
id: 'tartine-bakery-and-cafe-san-francisco',
name: 'Tartine Bakery & Cafe',
image_url: 'https://s3-media3.fl.yelpcdn.com/bphoto/vTLu8G86IqIazm7BRqIH4g/o.jpg',
is_closed: false,
url:
'https://www.yelp.com/biz/nopa-san-francisco?adjust_creative=oj0judbJDVIHIVps_GJrXQ&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=oj0judbJDVIHIVps_GJrXQ',
review_count: 4636,
categories: [
{
alias: 'newamerican',
title: 'American (New)',
},
{
alias: 'modern_european',
title: 'Modern European',
},
],
rating: 4,
coordinates: {
latitude: 37.774905,
longitude: -122.437506,
},
transactions: ['restaurant_reservation'],
price: '$$$',
location: {
address1: '560 Divisadero St',
address2: null,
address3: '',
city: 'San Francisco',
zip_code: '94117',
country: 'US',
state: 'CA',
display_address: ['560 Divisadero St', 'San Francisco, CA 94117'],
},
phone: '[phone]',
display_phone: '[phone]',
distance: 255.549722789804,
}

Answer 1

So lets say you have some small component that you want to use to just render one recommended activity link. it would look something like this
const RecommendedActivity = ({activity}) => {
return (
<Link className="PageCell recommended" to={`/places/top-activities/${activity.id}`}>
<div className="restaurantCard-main recommended">
<span className="host-recommendation-text">Host recommended</span>
<div className="restaurantCard recommended">
<img className="photo activity" src={activity.image_url} size="small" alt="activities" />
<div className="restaurantCard-right">
<div className="name">{activity.name}</div>
<div className="description"><p>{activity.description}</p></div>
</div>
</div>
</div>
</Link>
)
}
this makes it a reusable component. So then the way you would use it is like so:
first lets make an array of recommended activities to work with const seed = [recommendedActivities3, recommendedActivities4]
now in the render method you would just call the particular component for each element in the array
{ seed.map( (activity, idx) => <RecommendedActivity activity={activity} key={idx}/>)}