Conditional if statement in .map

Question

I would like to read the preferred_part and if it is true it should display checkmark and if it is false it won't display anything. This is the code I have below and the error I get is:

TypeError: Cannot read property 'substring' of undefined.

I don't even properly know how I should be able to read the boolean values of preferred part in any other way. Any sort of help will be appreciated. Please tell me how I can solve this issue. I am new to react. Thank you!

async function getParts() {
    console.log("Getting parts...");
    const res = await fetch("http://localhost:5000/lookup");
    const data = await res.json();
    setParts(data);
}

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

function formatLightState() {
    if (parts.preferred_parts = true) {
        return parts.tps_part_number + " - " + parts.manufacturer + " (" + parts.technical.substring(0, 95) + " ✔" + ")"
    }
    else {
        return parts.tps_part_number + " - " + parts.manufacturer + " (" + parts.technical.substring(0, 95) + ")"
    }
}

const partsList = parts.map((option) => ({
    manufacturer: option.manufacturer,
    technical: option.technical,
    tps_part_number: option.tps_part_number,
    value: option.part_key,
    quote_price: option.quote_price,
    vendor_name: option.vendor_name,
    vendor_id: option.vendor_key,
    label: formatLightState(),
}));

This isn't Java.

David Conrad
– David Conrad

2020-05-04 20:51:39 +00:00
Commented May 4, 2020 at 20:51 — David Conrad
– David Conrad, Commented May 4, 2020 at 20:51
Sorry, I removed it.

AS.
– AS.

2020-05-04 21:45:50 +00:00
Commented May 4, 2020 at 21:45 — AS.
– AS., Commented May 4, 2020 at 21:45

norbitrial · Accepted Answer · 2020-05-04 21:07:19Z

Currently parts is an array, that's why you are calling .map() there. It does not have property technical but instead the items of the array.

Based on that you need to pass option to formatLightState which represents the current element of the iteration from your array thus you can use that inside. Also instead of = you need to use === because = is used for assigning values the second one is checking equality. Additionally you can use ternary operator to check if you have the preferred part so you can add the tick. See from the documentation:

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.

Try as the following:

function formatLightState(option) {
    const ending = option.preferred_parts ? ' ✔' : '';
    return option.tps_part_number + ' - ' +
           option.manufacturer +
           ' (' + option.technical.substring(0, 95) + ending + ')';
}

const partsList = parts.map((option) => ({
    manufacturer: option.manufacturer,
    technical: option.technical,
    tps_part_number: option.tps_part_number,
    value: option.part_key,
    quote_price: option.quote_price,
    vendor_name: option.vendor_name,
    vendor_id: option.vendor_key,
    label: formatLightState(option),
}));

I would also consider checking the length of option.technical because it can throw and error if the length is less than or equal 95. I would check as the following:

const { technical } = option;
const shortTechnical = technical.length > 95 ? technical.substring(0, 95) : technical;

I hope this helps!

Lekoaf · Accepted Answer · 2020-05-04 20:52:52Z

0

You need to wait for getParts() to finish before you can do parts.map()

Also, this is wrong:

if (parts.preferred_parts = true) {

You are trying to set parts.preferred_parts to true instead of checking if it's value is true.

answered May 4, 2020 at 20:52

Lekoaf

1,0479 silver badges11 bronze badges

Comments

Nafeo Alam · Accepted Answer · 2020-05-04 21:18:24Z

Try This:

async function getParts() {
    console.log("Getting parts...");
    const res = await fetch("http://localhost:5000/lookup");
    const data = await res.json();
    await setParts(data);

    const partsList = parts.map((option) => ({
        manufacturer: option.manufacturer,
        technical: option.technical,
        tps_part_number: option.tps_part_number,
        value: option.part_key,
        quote_price: option.quote_price,
        vendor_name: option.vendor_name,
        vendor_id: option.vendor_key,
        label: formatLightState(),
    }));
}

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

function formatLightState() {
    if (parts.preferred_parts = true) {
        return parts.tps_part_number + " - " + parts.manufacturer + " (" + parts.technical.substring(0, 95) + " ✔" + ")"
    }
    else {
        return parts.tps_part_number + " - " + parts.manufacturer + " (" + parts.technical.substring(0, 95) + ")"
    }
}

Collectives™ on Stack Overflow

Conditional if statement in .map

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related