If condition within Array in React JS

Question

I have an array of value pairs as below,

const servingType = [
    {value: 'Hot', label: 'Served Hot'},
    {value: 'Cold', label: 'Served Cold'},
    {value: 'NA', label: 'Not Applicable'}
];

I have an object, which has a dynamic value for serving type. I have to check the serving type in the array and if it matches the value, and display the value in label of the array. My Object :

const selectedItem = {
    menuItemID: selectItem.menuItemID || 100,
    menuItemName: 'Menu Item Name (M)',
    itemPrice: 100
    servingType:'Hot',
    preparationTime: 15
}

I tried the code as below but I couldn't figure it. Any thoughts on the below code.

<div>
  {servingType.map((serveType, id) => (
     if(servingType[serveType].value === selectedItem.servingType){
     {selectedItem.label}
  }                               
  ))}
<div>

Giovanni Esposito · Accepted Answer · 2020-08-14 16:21:51Z

2

Ciao, I would suggest to use a filter function, not a map function, in this way:

const servingType = [
    {value: 'Hot', label: 'Served Hot'},
    {value: 'Cold', label: 'Served Cold'},
    {value: 'NA', label: 'Not Applicable'}
];

const selectedItem = {
    menuItemID: "selectItem.menuItemID || 100",
    menuItemName: 'Menu Item Name (M)',
    itemPrice: 100,
    servingType: 'Hot',
    preparationTime: 15
};

console.log(servingType.filter(st => st.value === selectedItem.servingType)[0].label)

note: I transform menuItemID into string just because in my example selectItem is undefined.

EDIT

@Guy Incognito made another intersting solution by using find instead of filter:

const servingType = [
        {value: 'Hot', label: 'Served Hot'},
        {value: 'Cold', label: 'Served Cold'},
        {value: 'NA', label: 'Not Applicable'}
    ];

    const selectedItem = {
        menuItemID: "selectItem.menuItemID || 100",
        menuItemName: 'Menu Item Name (M)',
        itemPrice: 100,
        servingType: 'Hot',
        preparationTime: 15
    };

    console.log(servingType.find(st => st.value === selectedItem.servingType).label)

edited Aug 14, 2020 at 16:21

answered Aug 14, 2020 at 13:32

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

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

6 Comments

Guy Incognito Over a year ago

.find() would be even better if there's only one expected result. It won't work inside JSX but they don't need to do it there, put the value in a variable after whatever needed is done and just print the variable.

Giovanni Esposito Over a year ago

Ciao, in my solution I supposed that there will be only one solution. Maybe my answer is limitated.

Bubashan_kushan Over a year ago

@GuyIncognito, could you please say how to use the .find() here for this scenario?

Giovanni Esposito Over a year ago

Glad to help you. Have a nice day :)

Guy Incognito Over a year ago

servingType.find(st => st.value === selectedItem.servingType).label

|

Jap Mul · Accepted Answer · 2020-08-14 13:28:31Z

0

Change the () to {} and then return the result. The inside of () expects a (React) object.

Also change servingType[serveType].value to serveType.value and change {selectedItem.label} to serveType.label

<div>
{
  servingType.map((serveType, id) => {
    if (serveType.value === selectedItem.servingType) {
      return serveType.label;
    }
    return null;
  });
}
<div>

answered Aug 14, 2020 at 13:28

Jap Mul

18.9k6 gold badges60 silver badges67 bronze badges

Collectives™ on Stack Overflow

If condition within Array in React JS

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related