如何映射两个数组并将匹配作为按钮返回？

Question

I have an array of key words and an array of objects. The key words array matches with a title inside an object from the array of objects data. I want to map over all of my objects looking for a key word match and return that objects title. I want to do this for each key word in my key word array.

Right now, I can only get it to work for one key word inside of the key word array. Basically if I have...

keyWords = [ "sink", "tub", "brush" ]

And my array of objects contains an obj.title which equals these key words, it will only match one of them and will return one button named "sink".

I can't seem to iterate through all of my key words array, but I am iterating through my array of objects.

data = array of objects

keyWords = array of key words

The goal is to map over data looking for matches in my key words, if I find a match I want to return a button with the matched objects title. The problem with this is that it doesn't iterate over the keyWords array. If I add something like keyWords[0] I can look at that specific item for a match, but I want to iterate over all of the keywords and find all matches.

const renderKeyButtons = this.props.data.filter(obj => {
   return this.state.keyWords === obj.title;
     }).map((obj, idx) => {
         return (
            <button key={idx}>{obj.title}</button>
         );
 });

My guess is that I need to add something to map over the keywords, like an additional (map, idx) => function but I'm not sure how to do this AND return all of the buttons at once.

Answer 1

Use Array.prototype.includes() method to achieve it without any iteration like this

const renderKeyButtons = this.props.data.filter(obj => {
   return this.state.keyWords.includes(obj.title);
     }).map((obj, idx) => {
         return (
            <button key={idx}>{obj.title}</button>
         );
 });

Answer 2

You are trying to compare an array to a string. Use Array#includes() to see if string is in array

const renderKeyButtons = this.props.data.filter(obj => {
   return this.state.keyWords.includes(obj.title);
     }).map((obj, idx) => {
         return (
            <button key={idx}>{obj.title}</button>
         );
 });