React/Redux: Can't map over state [object Object]

Question

Trying to orient through the dark depths of Redux-React-API jungle - managed to fetch data from API and console.log it - but neither me nor my Google skills have managed to find out why it doesn't render.

React Components

Parent Component:

class Instagram extends Component {
  componentWillMount(){
    this.props.fetchInfo();
  }

  render() {
    return (
      <div className="container">
        <div className="wrapper">
          <InstagramPost />
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ fetchInfo }, dispatch);
}

export default connect(null, mapDispatchToProps)(Instagram);

Child Component:

class InstagramPost extends Component {
  render() {
    console.log(this.props.info);
    this.props.info.map((p,i) => {
      console.log("PROPS ID: " + p.id);
    })

    return (
      <div>
        <h1>POSTS</h1>
        <ul className="uls">
          {
            this.props.info.map((inf, i) =>
              <li key={i}>{inf.id}</li>
            )
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = ({ info }) => {
  return { info }
}

export default connect(mapStateToProps)(InstagramPost);

Redux Action method:

const ROOT_URL = 'https://jsonplaceholder.typicode.com/posts';

export const fetchInfo = () => {
  const request = axios.get(ROOT_URL);
  return {
    type: types.FETCH_INFO,
    payload: request
  };
}

Redux Reducer method:

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

The JSON file looks like this:

In the console - it works and I get my Objects:

The state is also updated:

But when I map over this.props.info , trying to render this.props.info.id , nothing is rendered on the page.. Incredibly thankful for any input!

Answer 1

Looks like your props aren't set on the initial render. I'm guessing your API call hasn't finished.

Try checking the the variable is set or is an array first:

Something like this:

class InstagramPost extends Component {


render() {

    if(!this.props.info) return null

    return (
      <div>
        <h1>POSTS</h1>
        <ul className="uls">
          {
            this.props.info.map((inf, i) => {
              return <li key={i}>{inf.id}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = ({ info }) => {
  return { info }
}

export default connect(mapStateToProps)(InstagramPost);

Or you may want to check the length this.props.info.length > 0 .

Answer 2

There were two problems. As Mayank Shukla pointed out, nothing was returned from the map callback because of the block braces ( {} ) without a return statement.

The other problem was in the reducer. As the redux state for info is an array of users, you need to replace the old state on FETCH_INFO rather than add the fetched array to the beginning of it. Otherwise, you're maintaining an array of arrays of users, which will grow by one on each fetch.

Note that you don't need any checks on this.props.info , as it will be initialized to [] by your reducer and [].map(f) == [] .

For redux debugging I can very much recommend installing the Redux DevTools extension , as it will allow you to inspect all updates to the store. It needs a little setup per project, but that's well worth it.

Oh, and in the future, you might want to refrain from updating your question with suggestions from the comments/answers, as the question will no longer make sense to other visitors :-)