React / Spring Boot - how to populate array from list of objects

Question

I have a simple React/Spring Boot application where I want to populate a dropdown based on what's returned from an API call (a list of names, e.g "o1", "o2", "o3").

It can fetch and list the names as follows:

const templateOptionsTemp = await (await fetch(API_HOST + `/api/templates/`, {
  credentials: 'include'
})).json();

templateOptionsTemp.map((templateName) =>
  console.log("templateName: " + templateName)
);

Now, I just need to create a json object based on the name that looks like this:

{ key: 'o1', text: 'opt 1', value: 'o1'}

and add it to the array to be used as a dropdown, which is currently like this:

const templateOptions = [
  { key: 'o1', text: 'opt 1', value: 'o1' },
  { key: 'o2', text: 'opt 2', value: 'o2' },
  { key: 'o3', text: 'opt 3', value: 'o3' },
]

So the code would have to be something like this:

const tempArray = []
templateOptionsTemp.map((templateName) =>
  const obj = {
    'key': templateName,
    'value': templateName,
    'text': templateName
  }
  templateOptionsTemp.push(obj);
);

this.setState(templateOptions: tempArray);

But, I'm getting a syntax error on the above code - apparently you can't add more than one statement to the "map" function. The error is saying the "," operator is expected. If I add brackets, the error message says a return value is expected.

How do I get this to work? I just need to populate the templateOptions in the app's state.

One of the main things which you seem to be getting wrong here is that .map() will build a new array for you based on what you return from its callback. What you're doing here is building an array outside of your .map() method and then using .map() to iterate over your templateOptionsTemp array - for iteration only .forEach() is better suited for that. Instead, you can return obj in your map callback to "push" it to the new array map builds for you, and save that new array in a variable (eg: yeerk did this in their answer) — Nick Parsons
– Nick Parsons, Commented Jun 21, 2020 at 1:38

yeerk · Accepted Answer · 2020-06-21 02:16:30Z

2

When lambda's require multiple lines, or return an object, they must be wrapped with {} to denote their contents, and use return. Like this:

const tempArray = templateOptionsTemp.map((templateName) => {
    return { key: templateName, value: templateName, text: templateName };
});
this.setState({templateOptions: tempArray});

Braces are also needed when you call setState.

Also the ' marks around keys inside your object are fine, but not needed. It is exactly the same to exclude them, just less code to write (although you will still need them if your keys are not valid javascript identifiers).

edited Jun 21, 2020 at 2:16

answered Jun 21, 2020 at 1:19

yeerk

2,34321 silver badges29 bronze badges

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

1 Comment

Jack BeNimble Over a year ago

Nice answer. I had kind of hacked my way around it, but I finally (sort of) see how it's supposed to work.

Collectives™ on Stack Overflow

React / Spring Boot - how to populate array from list of objects

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