React access setState in array map

Question

I'm trying to update a state inside a array map, but it gives me an error that setState is not a function on this. How can I acheive this? My code snippet is given below

this.setState({
  isLoading: true
});

this.state.questions.map(function(key, value) {
  if (key.id === undefined) {
    axios
      .post("/api/questions/create", key)
      .then(response => {
        this.setState({
          isLoading: true
        });
      })
      .catch(error => {});
  } else {
    axios
      .post("/api/questions/update/" + key.id, key)
      .then(response => {
        this.setState({
          isLoading: true
        });
      })
      .catch(error => {});
  }
});

this.state.questions.map(function(key, value) { }) will not bind your this values but in ES6 arrow functions bind(this) keyword — coderman401
– coderman401, Commented Feb 10, 2020 at 10:12
you can also try this this.state.questions.map(function(key, value) { ...//stuff }).bind(this); — coderman401
– coderman401, Commented Feb 10, 2020 at 10:13

Chris · Accepted Answer · 2020-02-10 09:49:34Z

3

Try using a fat arrow syntax in your map instead.

Change this: this.state.questions.map(function(key, value) {

To this: this.state.questions.map((key, value) => {

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

Comments

maddina prudhviram · Accepted Answer · 2020-02-10 10:22:35Z

Look into THIS for detailed working nature of this keyword and Arrow Functions for detailed info about => functions. Hope the docs helps in better understanding.

this.setState({
        isLoading: true,
    });

    this.state.questions.map((key, value) => {

      let that = this; // assigning this to a variable

        if ( key.id === undefined ) {

            axios.post('/api/questions/create', key)
                .then((response) => {

                   that.setState({ 
                        isLoading: true,
                    });

                })
                .catch((error) => {  

                });

        } else {

            axios.post('/api/questions/update/' + key.id, key)
                .then((response) => {

                    that.setState({
                        isLoading: true,
                    });

                })
                .catch((error) =>{

                });

        }
    });

Collectives™ on Stack Overflow

React access setState in array map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related