How to map a JSON array to a List in ReactJS?

Question

I'm requesting a sample JSON array from http://jsonplaceholder.typicode.com/users and creating a list of items using the name values of that array in a ReactJS project.

The list is a Grommet list and I use the .map function to map the web service data to each list item.

But when the code renders, instead of creating a list of names using the web service. It creates only one list item and renders the call to .map and rows.push.

Question:

How can you to map a JSON array to a List in ReactJS?

This is what I've tried, first getting the web service via an AJAX GET and then calling .map to map that data to a list:

loadNameData() {
    $.ajax({
      url: 'http://jsonplaceholder.typicode.com/users',
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('#GET Error', status, err.toString());
      }.bind(this)
    });
  }

  getInitialState(){
    return {
       data: {
          names: [] 
       }
    };
  }

  componentDidMount() {
    this.loadAssetData();
  }

  render() {
      let layerNode;
      var rows = [];

      layerNode = (
        <Layer flush={true} closer={true} onClose={() => this._onCloseLayer()} align='right'>
          <Box pad='medium' colorIndex='grey-3'>
            <Heading>Filter Options</Heading>
            <Label>Names</Label>
                this.props.data.names.map(function(name) {
                    rows.push(<ListItem justify="between">)
                    rows.push(<span>)
                    rows.push({name})
                    rows.push(</span>)
                    rows.push(</ListItem>)
                }
                <List selectable={true} selected={0}>       
                    {rows}
                </List>           
          </Box>
        </Layer>
      );  

    return (
      <Section pad="small" full="vertical" flex={true}>         
                {layerNode}             
      </Section>
    );
  }

You understand how .map() works, right? The anonymous function you're passing to it doesn't explicitly return anything, which means that undefined is returned every time. So your .map() is returning an array of undefined values. — Michael Parker
– Michael Parker, Commented Sep 15, 2016 at 13:53
@MichaelParker I had a second look at the .map method and I see now that I need to pass in the item to map and in turn return that item. But the following gives a syntax error on my return statement. Any idea why that is? hastebin.com/ewebohocom.js — Brian Var
– Brian Var, Commented Sep 15, 2016 at 14:06
I don't think you should be returning an array here. Your logic is something like "for each name, render a <ListItem />", right? So you should be returning the <ListItem /> instead. — Michael Parker
– Michael Parker, Commented Sep 15, 2016 at 14:10
There's also like 3 other problems I see that you're probably going to run in to after fixing this one. — Michael Parker
– Michael Parker, Commented Sep 15, 2016 at 14:11

Michael Parker · Accepted Answer · 2016-09-15 14:51:32Z

9

I see a few problems here, hopefully I will be able to address them all.

1) I mentioned this in the comments, but it doesn't look like you understand what .map() is supposed to do. Here's a reference.

tl;dr: Calling .map() on an iterable object and passing a function to be executed on each item will return a collection of the return values of that function.

As an example, consider an array with a few names ['Michael', 'Brian', 'John']. I can call .map() on this array and use it to return an array of strings that say "hello" to everyone in the list:

var names = ['Michael', 'Brian', 'John'];
var sayHello = names.map(function (name) {
    return 'Hello, ' + name;
});
console.log(sayHello); // ['Hello, Michael', 'Hello, Brian', 'Hello, John'];

This can be used in React to perform logic that looks something like "Given some names, return some React components that represent the markup for those names".

2) The JSON data you have linked is an array of objects, each with their own name property. It looks like you're using jQuery to fetch this and save the result in this.state.data. This means that this.state.data is an array. So if you try to do this.state.data.names.map(), it's going to fail, because this.state.data.names is undefined. You'll want to do this.state.data.map() instead.

3) Inside of JSX, you can perform JavaScript expressions/statements as long as they're within curly braces {}. It doesn't look like you're doing that.

4) Your call to .map() is on this.props.data, I think you want to do this.state.data instead.

This is everything I saw that should be fixed or improved before this starts working as you expect it to. If it were me, I'd keep your .map() call inside of the <List /> that you're trying to render to:

<List selectable={true} selected={0}>       
    {
        this.state.data.map(function (person) {
            return (
                <ListItem justify="between">
                    <span>{person.name}</span>
                </ListItem>
            );
        })
    }
</List>

Or perhaps a cleaner solution would be to pull this logic out to its own helper function. But that isn't necessary for this to work.

Edit: Here's a demo

edited Sep 15, 2016 at 14:51

answered Sep 15, 2016 at 14:40

Michael Parker

13k7 gold badges41 silver badges58 bronze badges

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

3 Comments

Brian Var Over a year ago

Ok that explains things a bit better. For some reason I still get an unexpected token error on the return of the list item. This is the complete class hastebin.com/qocageliba.js Any ideas if it's a syntax error or otherwise?

Michael Parker Over a year ago

Just looks like you forgot the curly braces around the JavaScript expression in your JSX. In the block of code in my answer, notice how I have curly braces on the second and the second-to-last lines

Michael Parker Over a year ago

Also, take a look at the demo I posted at the bottom of my answer to see a working example. Hopefully that can help you figure out what is going wrong with yours

Collectives™ on Stack Overflow

How to map a JSON array to a List in ReactJS?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related