Q:

Mapping and Reducing an Array within an Array of Objects in Javascript

I'd appreciate any advice on the below. I need to extract the keywords from the array within an array of objects below, and reduce them to show all keywords without repetition.
My data JSON object is below:
[
  {
    "word":"Cat",
    "answer":"A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  },
  {
    "word":"Dog",
    "answer":"A type of canine",
    "keywords": ["pet", "cat-catcher"]
  },
]

My JS code is below:
let keywordList = data.map(entry => {

  let list = [...entry.keywords];
    return (
      list.reduce(( finalArray, current ) => finalArray.concat(current),[])
  );
});

Within my React component, I iterate over the array using map again:
<p>
  keywords: {keywordList.map((word, index) => {
    return (
      <span key={word+index}>
        <a onClick={this.searchKeyword} href="#" id={word}>{word}</a>
        <span> | </span>
      </span>
    );

  })}
</p>

Unfortunately, my reduce function doesn't seem to be working, I'm getting an array of arrays. Any advice would be great.

A:

Instead of map, a reduce with a filter:
var list = data.reduce((p, c) => {
  return p.concat(c.keywords.filter(el => !p.includes(el)));
}, []);

DEMO

