Reusing markup in reactJS and best practice

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: '+14158648643',
      display_phone: '(415) 864-8643',
      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}/>)}