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

Question

I am a relatively new React developer, and I am attempting to show only certain services that have a serviceType of either exterior, interior, combo, or add on. As of now, I have mapped these services into a react component and I am able to display every service that I pull from my database. However, I would like to only display "exterior" services or "interior" services based on the user's selection.

My current code is as follows:

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 [service, setService] = useState('Exterior');

    const exteriorTypeHandler = () => {
        setService('Exterior');
    };

    const interiorTypeHandler = () => {
        setService('Interior');
    };

    const comboTypeHandler = () => {
        setService('Combo');
    };

    const addonsTypeHandler = () => {
        setService('Add Ons');
    };

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

    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={exteriorTypeHandler} />
                <Button name='Interior' onClick={interiorTypeHandler} />
                <Button name='Combos' onClick={comboTypeHandler} />
                <Button name='Add Ons' onClick={addonsTypeHandler} />
            </div>

            <ul>{offersList}</ul>
        </div>
    );
};

export default ServiceList;

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

In an attempt to get the results I'd like to see, I've tried the following code for my :

<ul>
  {offersList.forEach(offer => {
        if (offer.serviceType === service) {
        return offer;
        }
  })}
</ul>

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

I have also tried: {offersList.serviceType === service && <ul>{offersList}</ul>}

I haven't been able to find anything to help in my Udemy lectures, YouTube, or other Stack Overflow posts, so I appreciate any help that can be given!

Answer 1

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

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

You need to use map instead of forEach and return offer wrapped in <li></li> tag.