API - dummy API as a separate component for React development

Question

Parent  component

Import dummyListings from dummyListings.js

import React from 'react';
import dummyListings from './dummyListings';

const SearchGroup = ({ apiValue }) => {
  return (
    <div>
      {apiValue === 1 && <div><BuddySearchText /></div>}
      {apiValue === 2 && (
        <div>
          {dummyListings.map(listing => (
            <div className="buddySearch_listing" key={listing.id}>
              <h5>{listing.title}</h5>
              <p>{listing.price}</p>
              <p>{listing.ptype}</p>
              <p>{listing.sqft} sqft</p>
              <p>{listing.beds}</p>
              <p>{listing.bathroom}</p>
            </div>
          ))}
        </div>
      )}
      {apiValue === 3 && <div>Div 3</div>}
    </div>
  );
};

export default SearchGroup;

 

API dummy component

SearchGroup component uses dummyListings from a separate file, keeping the component modular and the data easily maintainable.

// dummyListings.jsx
const dummyListings = [
  { id: 1, title: 'Listing 1', price: '$100,000', ptype: 'Landed', sqft: 4400, beds: 2, bathroom: 2},
  { id: 2, title: 'Listing 2', price: '$150,000', ptype: 'Non landed', sqft: 2217, beds: 4, bathroom: 3 },
  { id: 3, title: 'Listing 3', price: '$200,000', ptype: 'Non landed', sqft: 766, beds: 3, bathroom: 2 },
  { id: 4, title: 'Listing 4', price: '$250,000', ptype: 'Landed', sqft: 3120, beds: 4, bathroom: 5 },
];

export default dummyListings;