Reactjs Trying To Get Variable From Callback

So I have an POST API that returns the object that was just created and I would like to get the objects information in reactjs. createItem(item){ let temp; // POST to DB

Solution 1:

Before giving you the answer, you should know that directly mutating the state is considered as an antipattern. You should instead consider objects as immutable.

Instead of:

this.state.bucket_list.push({
  name: item,
  isCompleted: false
});
this.setState({bucket_list: this.state.bucket_list});

You should have done

this.setState({
  bucket_list: [
    ...this.state.bucket_list,
    {
      name: item,
      isCompleted: false
    },
  ]
});

---

Anyway, let me give you two different wayts to handle your usecase:

1. Use async/await (Recommended)

With the async/await you will be able to wait an instruction to finish before going to the next one.

asynccreateItem(item){
      // POST to DBconst data = awaitfetch(url(this.props.api), {
        method:"POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: item,
          isCompleted:false
        })
      });

      this.setState({
        bucket_list: [
          ...this.state.bucket_list,
          data,
        ],
      });
    }

2. Keep using fetch with then and use arrow function

It allows the function to not have their own this. That is why you can use the this.setState inside the arrow function.

createItem(item){
      // POST to DBfetch(url(this.props.api), {
        method:"POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: item,
          isCompleted:false
        })
      })
      .then(response => response.json())
      .then(data => {
        this.setState({
          bucket_list: [
            ...this.state.bucket_list,
            data,
          ],
        });
      });
    }

Note2: If your usecase is simple, you can keep using this method. Otherwise you should definitely take a look at redux