JS/React function returning string property but returns [object Object]

Question

I have this function:

const getNameListMarkdown = (props: Props) => {
  if (isDefined(props.details)) {
    return (
      Object.keys(props.details).map(x => <p>{props.details![x].name}</p>)
    );
  }

  return '';
};

For some reason, when I then try to render this it is rendered as [object Object], [object Object], for example if I have two objects in the list. If I console log the Object.keys it writes out the strings as it should in the .name space. So it should return a string but it doesn't render as such. And if I check what I get back where I call this function it receives a vNode object where the string can be seen in the children array. Does anyone know how to properly do this?

Are you sure you need exclamation point here: details![x] ?

Lazar Nikolic
– Lazar Nikolic

2020-01-27 09:24:02 +00:00
Commented Jan 27, 2020 at 9:24 — Lazar Nikolic
– Lazar Nikolic, Commented Jan 27, 2020 at 9:24

Quentin · Accepted Answer · 2020-01-27 09:23:49Z

3

<p>{props.details![x].name}</p> is JSX. When it is evaluated you get a React element (which is an object), not a string of HTML.

Meanwhile, Array.prototype.map gives you an array. So you end up with an array containing two objects.

When you call (directly or implicitly) .toString() on an array, you get a string made up of each member of the array (hence two "[object Object]"s)

If you want a string, use a template literal instead of JSX:

.map(x => `<p>${props.details![x].name}</p>`)

answered Jan 27, 2020 at 9:23

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tinu Jos K Over a year ago

what does the ! mean in between details and [x]?

Collectives™ on Stack Overflow

JS/React function returning string property but returns [object Object]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related