Unable to display data in component with react and redux

Question

I'm trying to display some dummy data on my component, but I'm not seeing anything appearing on it. When I console.log the expected result I get [object Object].

I think I'm missing something with my actions,actionCreators and reducers.

#actions/types.js

export const FETCH_USERS = 'fetch_users';



#actions/index.js   

import {
  FETCH_USERS
} from './types';

const user = [
  { name: 'D/S' },
  { name: 'Bob' },
  { name: 'Juan' }
]

export function fetchUsers() {
  return { type: FETCH_USERS, payload: user }
}



#reducers/users_reducer.js

import {
  FETCH_USERS
} from '../actions/types';

export default function (state = [], action) {
  switch(action.type) {
    case FETCH_USERS:
      return [ ...state, ...action.payload ];
  }
  return state;
}   


#reducers/index.js

import { combineReducers } from 'redux';
import UsersReducer from './users_reducer';


const rootReducer = combineReducers({
  users: UsersReducer
});

export default rootReducer;



# components/UserList.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import styles from './App.css';
import * as actions from '../actions';


class UserList extends Component {

  componentWillMount() {
    const fetchedUsers = this.props.fetchUsers() ? this.props.fetchUsers() : 'No users at this time';
    console.log(`This is the list of users: ${fetchedUsers}`); // <= here I just get [object Object]
  }

  renderUser(user) {
    <div className={ styles.card }> 
      <h4>{ user.name }</h4>
      <p>Lego Inc</p>
      <a>Email</a>
    </div>
  }

  render() {
    const userList = this.props.users.map(this.renderUser);
    console.log(`${userList}`);
    return (
     <div>
       { userList }
     </div> 
    )
  } 
}

function mapStateToProps(state) {
  return { users: state.users }
}
export default connect(mapStateToProps, actions)(UserList);



# components/App.js

import React from 'react';
import styles from './App.css';
import UserList from './UserList';

const App = () => (
  <div className={''}>
    <h2>React Redux middleware</h2>
    <div>
        <UserList />
    </div>
  </div>
);

export default App;

Shubham Khatri · Accepted Answer · 2017-05-10 16:28:32Z

4

You are not returning the JSX content inside your map function.

 renderUser(user) {
    return (           // Added a return statement here
    <div className={ styles.card }> 
      <h4>{ user.name }</h4>
      <p>Lego Inc</p>
      <a>Email</a>
    </div>
    )
  }

Also you need to use console.log(${userList}) is not required, console.log(userList) will work, however that not relevant to the problem. Just wanted to add to the answer

answered May 10, 2017 at 16:28

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

2 Comments

intercoder Over a year ago

Frigging christ man, thanks that solved my problem. I was hammering my head.

Shubham Khatri Over a year ago

Its just that little mistake that all of us do sometimes, no problem, glad to have helped :)

Edgar Pino · Accepted Answer · 2017-05-10 16:30:25Z

0

I think you are missing the ReactDOM.render in order to actually mount the component to the DOM.

# components/App.js

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './App.css';
import UserList from './UserList';

const App = () => (
  <div className={''}>
    <h2>React Redux middleware</h2>
    <div>
        <UserList />
    </div>
  </div>
);

ReactDOM.render(App, document.getElementById('react-app'));

answered May 10, 2017 at 16:30

Edgar Pino

514 bronze badges

1 Comment

intercoder Over a year ago

no I have another file index.js where I loaded my router. I just didn't add it here on the code. Thanks for answering though.

Collectives™ on Stack Overflow

Unable to display data in component with react and redux

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related