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;