How can I show certain elements from an array based on a React State?

In my approach I used two state variables for offers and filtered services.

const [offers, setOffers] = useState([]);
const [filteredServices, setfilteredServices] = useState();

const offersList = offers.map((offer) => (
<Service
  key={offer?.id}
  code={offer?.serviceCode}
  name={offer?.serviceName}
  description={offer?.description}
  type={offer?.serviceType}
  price={offer?.salePrice}
/>
));

When user select a particular service, filter the offers according to that and set the filteredServices.

const onClickTypeHandler = (e) => {
const currentService = e.target.name;
if (currentService === "Show All") { // If want to show all the offers set that.
  setfilteredServices(offers);
} else {   // filter the offers that matched for selected service.
  const filtered = offers.filter(
    (service) => service?.serviceName === currentService
  );
  console.log(filtered);
  setfilteredServices(filtered);
}

In display of the offers, show filtered or all the offers as below.

<ul>
      {filteredServices
        ? filteredServices.map((filteredService) => (
            <p>{filteredService.serviceName}</p>
          ))
        : offersList} // in 1st render, filteredServices empty. So display the all offers. then show filtered services.
    </ul>
  };

Check this demo sanbox for complete demonstration. Check this and share your feedback.

First off, I am assuming the response.data is being fetched successfully. I like the approach but a little refactoring can be done. First off, if all the button names are actual serviceTypes from the fetched data, then my solution should work. Ideally, you want to use one onClick function for each button element. In this case, we have something that can delineate from the other Buttons and that is their name.

So all we need to do is grab that name using event from the onClick handler (it looks like this in the code: e.target.name), save the name in our state for asynchronous filtering, and compare offer.serviceType to our currentService while looping through. We use map instead of forEach because we need to actually allocate memory and display them in the DOM.

EDIT: Also, notice how I rendered the fetched data in return. I used a ternary operator to make sure that the request was completed and the data stored in memory before we attempt to access it using map. I forgot to the mention this too - if the serviceTypes from the database are not the matching the names on the Buttons, make sure to fix that for this to work.

import React, { useEffect, useState } from 'react';
import Service from './Service';
import OffersService from '../../../services/OffersService';
import Button from '../../UI/Button';

const ServiceList = props => {
    const [offers, setOffers] = useState([]);
    const [currentService, setCurrentService] = useState('')

    const onClickTypeHandler = (e) =>{
        console(e.target.name)
        setCurrentService(e.target.name)
    }

    useEffect(() => {
        getAllOffers();
    }, []);

    const getAllOffers = () => {
        OffersService.getAllServices()
            .then(response => {
                setOffers(response.data);
            })
            .catch(err => {
                console.log(err);
            });
    };

    return (
        <div>
            <div className='flex justify-center space-x-4'>
                <Button name='Exterior' onClick={onClickTypeHandler} />
                <Button name='Interior' onClick={onClickTypeHandler} />
                <Button name='Combos' onClick={onClickTypeHandler} />
                <Button name='Add Ons' onClick={onClickTypeHandler} />
            </div>

            <ul>{offers ? offers.map(offer => {
                if (offer.serviceType === currentService){
                    return <li>        
                             <Service
                              key={offer.id}
                              code={offer.serviceCode}
                              name={offer.serviceName}
                              description={offer.description}
                              type={offer.serviceType}
                              price={offer.salePrice}
                             />
                          </li>
                }
            }) : ''}</ul>
        </div>
    );
};

export default ServiceList;