Can anyone provide me with some guidance on how to automatically fill in empty table fields based on previous information? I'm struggling to figure it out and would appreciate any ideas.
Below is an example of two arrays: one with fruits and the other with the desired answer to be applied if there is a match.
//I am attempting to populate the 'doYouLike' field
const CheckingFruits = () => {
var fruits = [
{ name: 'orange', color: 'orange', doYouLike: '' },
{ name: 'banana', color: 'yellow', doYouLike: '' },
{ name: 'pinneaple', color: 'yellow', doYouLike: '' },
{ name: 'apple', color: 'red', doYouLike: '' },
];
//I want to fill in this information based on logic that I am unsure of
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>
//I would like to display the answer here
<td>{fruit.doYouLike}</td>
</tr>
))}
</tbody>
</table>
);
};
CheckingFruits()
I have been searching for an answer on YouTube and forums for several days with no luck.
I recently learned how to find a single value:
function filterByOneFruit(fruit, fruitName) {
return fruit.filter((item) => item.name === name);
const foundTheFruit= filterByOneFruit(
fruits,'apple'
);
//Output: { name: 'apple', color: 'red', doYouLike: '' }
However, I am unsure how to find and modify multiple values simultaneously.
Your help would be greatly appreciated.