I’ve been trying to create a table that auto fill empty fields depending of the previous information provided but I don’t know how to make it possible, do you have any idea?

Here’s an example of an array of fruits and a second array that contains the answer I want to apply if it match.

//The 'doYouLike' field is what I'm trying to fill out

const CheckingFruits = () => {
  var fruits = [
    { name: 'orange', color: 'orange', doYouLike: '' },
    { name: 'banana', color: 'yellow', doYouLike: '' },
    { name: 'pinneaple', color: 'yellow', doYouLike: '' },
    { name: 'apple', color: 'red', doYouLike: '' },
  ];

//Taking this info I want to fill it out, but I don't know the logic to apply it
   const doILke = [
    { name: 'orange', answer: 'yes' },
    { name: 'banana', answer: 'no' },
    { name: 'pinneaple', answer: 'no' },
    { name: 'apple', answer: 'yes' },
  ];

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Color</th>
          <th>Do you like?</th>
        </tr>
      </thead>
      <tbody>
        {fruits.map((fruit, id) => (
          <tr key={id}>
            <td>{fruit.name}</td>
            <td>{fruit.color}</td>
      //This is were I would like to show the answer
            <td>{fruit.doYouLike}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

CheckingFruits()

I’ve been trying several days looking for an answer in youtube or forums but without success.

I’ve just found how to find one value:

function filterByOneFruit(fruit, fruitName) {
    return fruit.filter((item) => item.name=== name);

const foundTheFruit= filterByOneFruit(
    fruits,'apple'
);

//Output: { name: 'apple', color: 'red', doYouLike: '' }

but I don’t know how to find and change multiple values at the same time

I really apreciate if you can help me.