Problem occurs when check conditions in map function React

Question

I am trying to get data from the backend and display the data in the frontend. To do that I tried this code.

function Posts() {

    const [notes, getNotes] = useState([]);

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

    const getAllNotes = async () => {
        await axios.get(`/buyerPosts`)
            .then ((response)=>{
                const allNotes=response.data.existingPosts;
                getNotes(allNotes);
            })
            .catch(error=>console.error(`Error: ${error}`));
    }
    console.log(notes);

    const buyerId=(localStorage.getItem("userId"));
    console.log(buyerId);

    const [offers, getOffers] = useState([]);

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

    const getAllOffers = async () => {
        await axios.get(`/viewPendingSellerOffers`)
            .then ((response)=>{
                const allNotes=response.data.existingOffers;
                getOffers(allNotes);
            })
            .catch(error=>console.error(`Error: ${error}`));
    }
    console.log(offers);

    const wasteItem = offers?.filter(wasteItem => wasteItem.status==='accepted' && wasteItem.buyerId===buyerId && wasteItem.wasteItemsListId==='completePost');
    console.log(wasteItem);

    return(
        <main className="grid-b">
            {notes.map((note,index)=> {
                if(note._id===wasteItem.postId)
                    return (
                    <article>
                        <div className="text-b">
                            <h3>Post ID: {index + 1}</h3>
                            <p>Location: {note.address}</p>
                            <p>Post Type: {note.postType}</p>
                            <p>Address: {note.address}</p>
                            <p>Telephone No: {note.contact}</p>
                        </div>
                    </article>
                    );
            })}
        </main>
    );
}

export default Posts;

Hare, I call the first API and get a length 7 array of objects. This is an image of this result.

Then I call a second API and get a length 6 array of objects. This is an image of this result.

Then I try to filter second API call results like this const wasteItem = offers?.filter(wasteItem => wasteItem.status==='accepted' && wasteItem.buyerId===buyerId && wasteItem.wasteItemsListId==='completePost'); and I get length 2 array of objects as the result of this filter function.

Then I try to map the first API call data in a map function. To do that I used this condition if(note._id===wasteItem.postId). But this map function is not working. Maybe it does not work because wasteItem is an array of objects. How do I solve this problem?

Answer 1

wasteItem is an array of objects, but you treated it as object here if(note._id===wasteItem.postId). You would need to iterate through wasteItem array first, or use find().

{notes.map((note,index)=> {
                if(wasteItem.find(o=>o.postId === note._id) !== undefined)
                    return (
                    <article>
                        ...
                    </article>
                    );
            })}