How to display an image?

Question

I can not display the image, I do

const imgUrl = companyList.find(i => i.id === items.companyId).imgUrl;

And after creating the block, the desired picture is displayed, but it is worth updating the page, as ...

Everything is normally added to the database and should work ... In my other file, I use the exact same method and everything works, but for some reason there isn’t ...

const getInvoiceList = () => {
    return invoiceList.map(items => {
        const imgUrl = companyList.find(i => i.id === items.companyId).imgUrl;
        return (
                <div key={items.id} className="invoice__card">
                    <div className="card__data">
                        <p>{items.invoice}</p>
                        <i onClick={() => onVisibleDetails(items.id)}><FiMoreHorizontal /></i>
                    </div>
                    <div className="card__body">

                    <div className="invoice__order">
                            <p>Оплатил</p>
                            <img src={imgUrl} alt="logo" />
                        </div>

                        <div className="invoice__order">
                            <h3>$2.400</h3>
                            <p>Сумма</p>
                        </div>

                        <div className="invoice__date">
                            <h3>30.01.2020</h3>
                            <p>Дата оплаты</p>
                        </div>
                    </div>
                </div>
        );
    });
};

<div className="invoice__card-wrapper">
    {invoiceList.length !== 0 ? getInvoiceList() : "Nety"}
</div>

Answer 1

Looks like your data is either incomplete, or the structure isn't matching up with the way you're trying to access it. The error Cannot read property "imgUrl" is occurring because your find() method call is not finding an object, so the imgUrl property isn't defined.

This will keep the error from occurring:

const imgUrl = (companyList.find(i => i.id === items.companyId) || {}).imgUrl;

If you want to add more info about where the companyList is coming from, we might be able to get closer to an answer.