Skip to content

Display value returned by function in component

I have this component Field.jsx.

class Field extends Component {
  constructor(props) {

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

[{"name": "Edson", "position": "Forward"}...{...}, {...}]

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

getPlayersByPosition = (players, position) => {
    return players.filter((player) => player.position === 'Forward');

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

render() {
    const { players } = this.props;
      return (
       <div className="back">
          <div className="field-wrapper">
            <Output output={this.props} />
            <div className="row">
               {this.getPlayersByPosition(players, 'Forward')[0]}> //does not work
               {players[1].name} //works
    return null}

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?


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

{this.getPlayersByPosition(players, 'Forward')[0]}

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

{this.getPlayersByPosition(players, 'Forward')[0].name}

it should work