CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
r121
r121

Reputation: 2718

Filter an object from an array in react

I am fetching data from an API using axios. On my invoice details page when I try to get data of only one invoice using this code

    const id = props.match.params.id;

    const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id));

It returns an object or undefined but I only want an object inside an array or an empty array not undefined how should I do that? When I tried to use .filter method instead of .find, it logged the array into the console infinite time.

Complete code:

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import backIcon from '../assets/images/icon-arrow-left.svg'
import InvoiceDetailsHeader from './InvoiceDetailsHeader';
import { useSelector } from 'react-redux';
// remove this after adding DB
import data from '../data.json'
import InvoiceCardDetails from './InvoiceCardDetails';

const InvoiceDetails = (props) => {
    const [invoiceData, setInvoiceData] = useState([]);
    const id = props.match.params.id;

    const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id));

    useEffect(() => {
        setInvoiceData(invoice);
        // console.log(invoiceData)
    }, [id, invoice]);

    return (
        <div className="mx-auto px-12 py-16 w-full max-w-3xl">
            <Link to="/" className="text-neutral text-xs"><img className="inline -mt-1 mr-4" src={backIcon} alt="back" /> Go back</Link>
            <InvoiceDetailsHeader data={invoiceData} />
            <InvoiceCardDetails data={invoiceData} />
        </div>
    )
}

export default InvoiceDetails

Anyone please help me with this.

Upvotes: 0

Views: 114

Answers (3)

Dawood Ahmad
Dawood Ahmad

Reputation: 474

I think it's because you're setting setInvoiceData(invoice) which is undefined at the very start. so make a check on it

 if(invoice){
setInvoiceData([invoice])
}

please try this one

Upvotes: 1

lowfront
lowfront

Reputation: 639

First of all, I don't know if I missed anything, but I don't think it's a good way for invoice to be possible for both objects and empty array. I think a better way is to divide the conditions and render the invoice when the ID is not found.

If a filter method is used instead of a find, the filter method returns a new array instance each time. So as the second argument(invoice) of use Effect changes, the update callback of use Effect will continue to be repeated.

const invoice = useSelector((state) => state.invoices.find(invoice => invoice._id === id) ?? []);

What you want can be done simply using Nullish coalescing operator. However, [] also creates a new array instance, so update callback is repeated indefinitely.

So to make what you want work in the current code, please remove the invoice from the dependence of useEffect as below.

useEffect(() => {
  setInvoiceData(invoice);
  // console.log(invoiceData)
}, [id]);

Upvotes: 1

mouafus
mouafus

Reputation: 158

useEffect(() => {
    if(invoice){
       setInvoiceData([...invoiceData, invoice])
    }
}, [id, invoice]);

Upvotes: 1

Related Questions