Extract string from object and pass it to parent function - Typescript , React

Question

I am trying to achieve something rather simple, but i do not know why i am so stuck on it. I want to send data to an parent function. This data is only acceptable in a form of a string. But my issue here is that sometimes on click event i may have multiple strings The final goals is to send them both up

setNewFruits('banana' , 'mango')

So on click i am getting my object

...
  const foundFruits = foundFruitsCategory.fruits

console.log : {name: 'banana', id: 1, color: 'yellow'}

And the if i want to extract the name only i do :

 const foundAndSelectedFruit = foundFruits.map((fruit) => fruit.name)

console.log output:

['banana']

But the thing is i want to have the name only as a string banana and not as array of strings. Yes i can say

console.log(foundAndSelectedFruit[0]) 

That will give me the banana , but the thing is sometimes onClick i could have two objects

console.log output:

[
  {name: 'banana', id: 1, color: 'yellow'}
  {name: 'mango', id: 2, color: 'orange'}
]

So the log of foundAndSelectedFruit will be

['banana','mango']

How i can extract them as seperate strings and send them to my update function ? ( The function awaits a string of name )

P.S. I already tried with forEach loop , but instead of printing my string it gives me back undefined

Answer 1

Have you tried the spread operator?

setNewFruits(...foundAndSelectedFruit)