Data from API not being outputted | React, Redux

Question

I'm fetching data from an API and I'm using React and Redux to do so. I am successfully getting data from the API. Here's the console.log with the output:

console.log(this.props.customer.data)

But I can't get it to display in my React app. I bet my problem is really basic, but I really don't understand why this is not working.

I tried doing this inside of return:

{this.props.customer.data.map(customers => <p>{customers.name}</p>)}

But I'm only getting the error: TypeError: Cannot read property 'map' of undefined.

If anyone know why this is happening, please let me know! Thanks!

(I know that I should not have my props in singular, because it represents multiple customers..)

Is it failing when first trying to render? Do you have a default value for this.props.customer.data? — Mike Cluck
– Mike Cluck, Commented Aug 2, 2017 at 17:37
I mean that the initial state for customer.data should be an array. — Mike Cluck
– Mike Cluck, Commented Aug 2, 2017 at 17:59
Inside my reducer I got this: export function customer(state = [], action) — Martin Nordström
– Martin Nordström, Commented Aug 2, 2017 at 18:00
Is that setting customer.data to an array or customer to an array? — Mike Cluck
– Mike Cluck, Commented Aug 2, 2017 at 18:00

Mike Cluck · Accepted Answer · 2017-08-02 18:07:08Z

3

The problem is that you don't have an initial value for customer.data. You mentioned in another comment that your reducer is setup like this:

export function customer(state = [], action) {
  ...
}

which is setting customer to an array. Instead, do something like this in your reducer:

const initialState = {
  data: [] // <-- Default value for customer.data is an empty array
};

export function customer(state = initialState, action) {
  ...
}

answered Aug 2, 2017 at 18:07

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

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

2 Comments

Martin Nordström Over a year ago

The funny part is that I had that before, but I removed it for some reason............. Thanks Mike!

Mike Cluck Over a year ago

@MartinNordström Glad I could help! :)

lukaleli · Accepted Answer · 2017-08-02 17:44:17Z

3

You're basically trying to iterate over undefined/null object. Good practice is to set arrays initial state in redux store to an empty array. Having that you don't have to add additional checks in your component to check if array actually exists. Array.prototype.map just won't iterate over an empty array and won't render anything. Make sure you set initial state of customer.data to an empty array in your reducer.

answered Aug 2, 2017 at 17:44

lukaleli

3,6653 gold badges25 silver badges32 bronze badges

1 Comment

Martin Nordström Over a year ago

I have this in my reducer: export function customer(state = [], action)

Alex Borodin · Accepted Answer · 2017-08-02 17:39:17Z

2

If you fetch data from API, you have no data in initial rendering, so you should try something like this:

    {this.props.customer.data ? this.props.customer.data.map(customers => 
      <p>
        {customers.name}
      </p>) : null}

answered Aug 2, 2017 at 17:39

Alex Borodin

2,0341 gold badge16 silver badges30 bronze badges

Collectives™ on Stack Overflow

Data from API not being outputted | React, Redux

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related