Filter an object from an array in react

Question

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.

find() method returns undefined if element is not found. You can use an if condition to check if invoice is undefined, and set it to an empty array if it is. — TechySharnav
– TechySharnav, Commented Sep 21, 2021 at 4:29

Dawood Ahmad · Accepted Answer · 2021-09-21 05:29:09Z

1

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

answered Sep 21, 2021 at 5:29

Dawood Ahmad

4847 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

r121 Over a year ago

thanks for your help. It's working as expected

Dawood Ahmad Over a year ago

most welcome, and please mark the answer ticked and useful. thank you

mouafus · Accepted Answer · 2021-09-21 04:42:40Z

1

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

answered Sep 21, 2021 at 4:42

mouafus

1687 bronze badges

Comments

lowfront · Accepted Answer · 2021-09-21 05:18:59Z

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]);

Collectives™ on Stack Overflow

Filter an object from an array in react

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related