How do i render the Array value by comparing another array in ReactJs

Question

I have certain array from props which is given below

this.props.fruits= [
  {
    source: "Apple",
    code: 101,
  },
  {
    source: "banana",
    code: 105,
  },
  { source: "Mango",
    code: 107,
  },
];

in my state I have to save the code only for send it for back-end my state is given below

this.state ={
   myfruits:[101,105]
}

I have to render the myfruits name in the DOM element example rendering DOM element

My Fruits : Apple , banana

StackByMe · Accepted Answer · 2020-10-13 08:25:47Z

2

You could make a combination of filter, map and join to get this working.

Example is not React but shows you how this can be achieved.

const fruits = [
  {
    source: "Apple",
    code: 101,
  },
  {
    source: "banana",
    code: 105,
  },
  { source: "Mango",
    code: 107,
  },
];

const state = [101, 105];

const getFruitNames = () => fruits
  .filter(({ code }) => state.includes(code)) // Get all fruit objects where the code is also in state
  .map(({ source }) => source) // Only return the source (name)
  .join(", "); // Turn into a comma seperated string

console.log(`My Fruits: ${getFruitNames()}`);

answered Oct 13, 2020 at 8:25

StackByMe

6,57522 silver badges31 bronze badges

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

2 Comments

Sanjai kumar Over a year ago

.join(", ") method is not working while rendering it returns as [object,object].. is there any solution

StackByMe Over a year ago

@Sanjaikumar It means the items you join are objects. You only need to return the name that you want to show, if you have some more code i can try to debug it.

Md Sabbir Alam · Accepted Answer · 2020-10-13 08:24:25Z

1

You can use a combination of filter and map method,

this.props.fruits.filter((fruit) => this.state.myfruits.includes(fruit.code))
          .map((fruit) => fruit.source)

This should solve your problem. You can read more about map and filter here.

answered Oct 13, 2020 at 8:24

Md Sabbir Alam

5,0643 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

How do i render the Array value by comparing another array in ReactJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related