score:1

Accepted answer
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

score:0

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;

score:1

<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>
  };

Related Query

More Query from same tag