reactJS map function not working as expected

Question

I have a reactJS application where I am trying to dynamically render some data that I read in with a fetch() promise. This is the code of my application:

    import React from 'react'; 
import '../styles/app.css'; 

//think of react components as functions 
class Testpage2 extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
        numberOfRecords: 0,
        productArray: [{
            barcode: '',
            name: ''
        }]
    }; 

}  

componentDidMount() { 

    let currentComponent = this; 
    var recordCount = 0;
    var tempData = [];

    //Make use of the API not the web service. 
    let url = "http://wmjwwebapi-dev.us-west-2.elasticbeanstalk.com/api/getdata"; 
    const options = { method: 'GET' }; 

    fetch(url, options) 
    .then(function(response) { 
        return response.json(); 
    }) 
    .then(function(myJson) { 
        if (myJson == undefined) 
        { 
        console.log("fetch failed"); 
        } 
    else 
    { 
        //inspect the data that the WebAPI returned 
        var return_code = myJson[0].return_code; 
        if (return_code == "Default Return code"){ 
            recordCount = -2; 
        } else { 
            tempData = JSON.parse(myJson[0].return_string);
            recordCount = tempData.barcode.length; 
        }
        currentComponent.setState(
        {
            numberOfRecords: recordCount,
            productArray: currentComponent.state.productArray.push(
            { 
                name: tempData.name, 
                barcode: tempData.barcode 
            })
        }
    );
    } 
    }); 
} 

render() { 
    console.log(this.state.productArray);
    return ( 
        <div> 
            { this.state.productArray.map((prod, index) => <li key={index}>{prod.barcode}</li>)}
        </div> 
    ) 
} 
} 

export default Testpage2

and this is the error message that I am getting:

Uncaught (in promise) TypeError: this.state.productArray.map is not a function
at Testpage2.render (testpage2.js:67)

This is the result of the console.log() that I added in the render() function:

I'm not really sure what this error is telling me or how to go about debugging the issue.

Any help is greatly appreciated. Thank you.

Can you tell me what the result is when you console.log "this.state.productArray" in the render function? — Patrick Hollweck
– Patrick Hollweck, Commented Aug 26, 2018 at 22:37
I edited the post to include an image from the console.log() — Jonathan Small
– Jonathan Small, Commented Aug 26, 2018 at 22:48
Thanks but I already answered your question... Can you confirm that it works then? — Patrick Hollweck
– Patrick Hollweck, Commented Aug 26, 2018 at 22:50
Can you check that Array.isArray(this.state.productArray) is true? — Dan
– Dan, Commented Aug 26, 2018 at 22:57

Patrick Hollweck · Accepted Answer · 2018-08-26 22:56:29Z

1

The return type of array.push is the new length of the array aka a number

So you set the state property productArray to a number and then try to call number.map which is not defined

How to fix?

push first and then use that array to set the state

const updatedArray = [...currentComponent.state.productArray] 
updatedArray.push({ name: tempData.name, barcode: tempData.barcode })

currentComponent.setState({
   numberOfRecords: recordCount,
   productArray: updatedArray
}

Resources: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

edited Aug 26, 2018 at 22:56

answered Aug 26, 2018 at 22:42

Patrick Hollweck

6,8752 gold badges21 silver badges35 bronze badges

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

3 Comments

Arnold Gandarillas Over a year ago

It's not a good idea to modify the state manually. The recommended way is always to use setState method.

Arnold Gandarillas Over a year ago

Nice one buddy.

Hemadri Dasari Over a year ago

Still better way of push elements to an array in React is currentComponent.setState(prevState =>({productArray: [...prevState.productArray, { name: tempData.name, barcode: tempData.barcode }]}));

kristaps · Accepted Answer · 2018-08-26 22:44:29Z

0

According to MDN:

The push() method adds one or more elements to the end of an array and returns the new length of the array.

It appears that your code expects that Array.push() will return the modified array itself:

productArray: currentComponent.state.productArray.push(...

To prevent the state corruption you should do construct the new array separately, before invoking setState().

answered Aug 26, 2018 at 22:44

kristaps

1,74311 silver badges16 bronze badges

Comments

Andriy · Accepted Answer · 2018-08-26 22:45:29Z

0

Array's push() function returns integer, so you cannot call map() function on it. Try to change your function to:

currentComponent.setState({
  numberOfRecords: recordCount,
  productArray: [...currentComponent.state.productArray, { 
    name: tempData.name, 
    barcode: tempData.barcode 
  }]
})

answered Aug 26, 2018 at 22:45

Andriy

15.5k4 gold badges48 silver badges52 bronze badges

Comments

inostia · Accepted Answer · 2018-08-26 22:52:25Z

0

The JavaScript Array.push method does not return the modified array, it returns the new length of the array, which is a number. Numbers in JavaScript do not have the map method.

You need to do first create a clone of the productArray, then push the new data, and finally set state:

const newProductArray = [...currentComponent.state.productArray]
newProductArray.push({ 
    name: tempData.name, 
    barcode: tempData.barcode 
})
currentComponent.setState(
    {
        numberOfRecords: recordCount,
        productArray: newProductArray
    }
)

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

edited Aug 26, 2018 at 22:52

answered Aug 26, 2018 at 22:46

inostia

8,0633 gold badges34 silver badges34 bronze badges

3 Comments

Hemadri Dasari Over a year ago

Still better way of push elements to an array in React is currentComponent.setState(prevState =>({productArray: [...prevState.productArray: { name: tempData.name, barcode: tempData.barcode }]}));

inostia Over a year ago

Do you have a source for that syntax @Think-Twice? I've never seen : used in an array, as far as I know it's reserved for objects.

Hemadri Dasari Over a year ago

Sorry it’s typo mistake it should be comma not colon

Collectives™ on Stack Overflow

reactJS map function not working as expected

4 Answers 4

3 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related