How to access data from an item in an array using reactjs state?

Question

I am trying to get the data (id) from the main object inside an array that I GET from my Django-rest API.

I am going to use the id to pass it into a fetch url.

I have tried to use item.id but it doesn't get the id value.

This is the format of the array of the "task".

[
    {
        "title": "Task 4",
        "description": "Task 4",
        "video": "ad12312312",
        "done": false,
        "steps": [
            {
                "title": "Task 4 Task 1",
                "description": "Task 4 Task 1",
                "done": false,
                "task_id": 4,
                "id": 10
            },
            {
                "title": "Task 4 Task 2",
                "description": "Task 4 Task 2",
                "done": false,
                "task_id": 4,
                "id": 11
            },
            {
                "title": "Task 4 Task 3",
                "description": "Task 4 Task 3",
                "done": false,
                "task_id": 4,
                "id": 12
            }
        ],
        "id": 4
    }
]

class Screen extends Component {

  constructor() {
    super();
    this.state = {
      task: [],
    };
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
    fetch('https://url.com/daily-ecommerce/', {
      method: 'GET',
      headers: {
        'Authorization': `Token xxxxx`
      }
    })
    .then( res => res.json())
    .then( jsonRes => this.setState({ task: jsonRes }) )
    .catch( error => console.log(error))
    .then(console.log(this.state.task.id))
    fetch(`https://url.com/step/?task_id=${this.state.task.id}`, {
      method: 'GET',
      headers: {
        'Authorization': `Token xxxxx`
      }
    })

I need to access the ID of the task. (in this case, the "id":4)

Can I insert it directly in the fetch(https://api.taskoftheday.com/step/?task_id=${this.state.task[0].id}, in some way? — 9minday
– 9minday, Commented Oct 31, 2019 at 19:45
Hmm I get this: TypeError: undefined is not an object (evaluating 'this.state.task[0].id') — 9minday
– 9minday, Commented Oct 31, 2019 at 19:52
Does the console log the id in your third then with this.state.task[0].id? — seanulus
– seanulus, Commented Oct 31, 2019 at 19:54

Clarity · Accepted Answer · 2019-10-31 19:55:39Z

You'd need to get the id in a callback from setState to ensure it has been set:

 componentDidMount() {
   AppState.addEventListener('change', this._handleAppStateChange);
   fetch('https://url.com/daily-ecommerce/', {
       method: 'GET',
       headers: {
         'Authorization': `Token xxxxx`
       }
     })
     .then(res => res.json())
     .then(jsonRes => this.setState({
       task: jsonRes
     }, () => {
       fetch(`https://url.com/step/?task_id=${this.state.task[0].id}`, {
         method: 'GET',
         headers: {
           'Authorization': `Token xxxxx`
         }
       })
     }))
     .catch(error => console.log(error))
 }

Another way would be to pass the id directly from the json response:

  componentDidMount() {
   AppState.addEventListener('change', this._handleAppStateChange);
   fetch('https://url.com/daily-ecommerce/', {
       method: 'GET',
       headers: {
         'Authorization': `Token xxxxx`
       }
     })
     .then(res => res.json())
     .then(jsonRes => {
       this.setState({
         task: jsonRes
       })
       fetch(`https://url.com/step/?task_id=${jsonRes[0].id}`, {
         method: 'GET',
         headers: {
           'Authorization': `Token xxxxx`
         }
       })
     })
     .catch(error => console.log(error))
 }

Collectives™ on Stack Overflow

How to access data from an item in an array using reactjs state?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related