In React, how can I use "map" to transform an array of objects into a new array of objects?

Question

I have a simple question regarding my React 16.10.0. How do I transform my array into another array of objects? I have an array of objects that have attributes

id
name

And I want to convert that array to another array with attributes

id
text

So I tried

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
     
    const tags = props.values.map(result => 
      {
        id: result.id,
        text: result.name
      });

but the compiler is complaining that a ";" is expected on the "text:" line.

I think you just missed a return in the map function

Rafael Umbelino
– Rafael Umbelino

2020-05-27 16:56:20 +00:00
Commented May 27, 2020 at 16:56 — Rafael Umbelino
– Rafael Umbelino, Commented May 27, 2020 at 16:56

cicolus · Accepted Answer · 2020-05-27 16:59:12Z

2

Javascript is interpreting the { ... } as a block of code instead of an object literal. An easy way to get around that is to just add parenthesis around the object, as in the following:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        const tags = props.values.map(result => 
            ({
                id: result.id,
                text: result.name
            }));

answered May 27, 2020 at 16:59

cicolus

8579 silver badges18 bronze badges

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

Comments

Brian Thompson · Accepted Answer · 2020-05-27 17:07:54Z

I think you're mixed up because of the implied return not working when returning an object.

There's two ways to return from an arrow function:

Explicit return (block body)

() => {
  return 'something';
}

or Implicit return (concise body)

() => 'something';
() => ('something')

You're attempting to use implicit return, but you're returning an object, so the syntax conflicts with your expectation.

result => 
{
  id: result.id,
  text: result.name
});

This is not an object, but a function body. The function body is invalid syntax leading to the error.

You can fix this by using parenthesis, or by manually returning:

result => 
({
  id: result.id,
  text: result.name
};

result => {
  return {
    id: result.id,
    text: result.name
}};

For reference: check out the section "Returning object literals" in the docs for arrow functions,

Collectives™ on Stack Overflow

In React, how can I use "map" to transform an array of objects into a new array of objects?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related