React component cannot map and render data in an array from an API

Question

I'm using react, redux, axios, and redux-thunk to handle async.

I have a feeling that the solution is going to be obvious but for some reason, I am unable to map over an array of users (retrieved from a local express/node api) and render each user out. The user's info will be logged into the console but the...

<p>NO USERS FOUND</p>

...component is rendered onto the screen instead.

Here is my repo: https://github.com/tedjames/reduxTest

And here is what my component looks like:

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { getUsers } from '../redux/actions'

class App extends Component {
  componentWillMount() {
    console.log(this.props);
    this.props.getUsers();
  }

  render() {
    if (this.props.users[1]) {
      this.props.users.map((user) => {
        console.log("USER FOUND!");
        console.log(user.email);
        return <p key={user.id}>USER FOUND: {user.email}</p>
      });
    } else {
      return <p>NO USERS FOUND</p>
    }
  }
}

const mapStateToProps = state => {
  return {
    users: state.admin.users
  };
};

export default connect(mapStateToProps, { getUsers })(App);

And this is my action that uses axios to fetch the users:

import axios from 'axios'
import { GET_USERS } from './types'

export const getUsers = () => {
  return (dispatch) => {
    axios.get('http://localhost:3090/users')
      .then(res => {
        console.log("<-- // DATA RECEIVED FROM SERVER // --> ");
        console.log(res);
        dispatch({ type: GET_USERS, payload: res.data })
      })
      .catch(({ response }) => {
        console.log("// ERROR RECEIVED FROM SERVER //");
        console.log(response);
      });
  }
};

This is what my console outputs

caisah · Accepted Answer · 2017-03-03 17:35:21Z

2

You have to return the array inside render (and wrap it in some tag):

return (
  <div>{ this.props.users.map((user) => {
      console.log("USER FOUND!");
      console.log(user.email);
      return <p key={user.id}>USER FOUND: {user.email}</p> }
  </div> 
 );

edited Mar 3, 2017 at 17:35

answered Mar 3, 2017 at 17:30

caisah

2,0961 gold badge22 silver badges38 bronze badges

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

5 Comments

nbkhope Over a year ago

I'd like to note that doing mapping inside the return for render is not good practice (or doing any kind of logic flow, for that matter). It's best to take all the logic out to before the return statement and then just use the variable name inside the return, with the JSX.

Ted Werbel Over a year ago

Yess! Thanks caisah :D

Ted Werbel Over a year ago

Hey nbkhope, what would that look like exactly? I'm having issues getting it set up the way you reccomended - Nevermind, got it!

markerikson Over a year ago

I think that @nbkhope is suggesting the code structure I have in this example: gist.github.com/markerikson/47fff93c92286db72b22bab5b02e2da3 .

nbkhope Over a year ago

@markerikson yes, that's great! Thank you for sharing. JSX should look clean and nice. As an additional note, sometimes instead of having something before return, you can also pull the logic into its own separate function and call it from inside the JSX.

Collectives™ on Stack Overflow

React component cannot map and render data in an array from an API

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related