Skip to content
Advertisement

Display value returned by function in component

I have this component Field.jsx.

JavaScript

players is a list of dicts which contains structures like so:

JavaScript

And I have created this function to filter a list of dicts so as to display all players names based on a position:

JavaScript

And here I’m trying to display the first player ‘name’ returned by the function directly <Position> HERE </Position>, with:

JavaScript

On my first <Position>, when I try to apply the function, I’m getting:

enter image description here

On the second I get the value printed:

enter image description here


How do I fix this?

Advertisement

Answer

in React objects are not valid as a children. so when you are trying to render

JavaScript

it is returning the first object from the filtered array . if you do something like

JavaScript

it should work

Advertisement