luckydev
luckydev

Reputation: 149

How to display an image?

I can not display the image, I do

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

enter image description here

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

enter image description here

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>

Upvotes: 1

Views: 44

Answers (1)

Gerard
Gerard

Reputation: 801

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.

Upvotes: 2

Related Questions