How to access other state/property value in new state prop

Question

I want to access the value of state/property in new state prop. Actually I have already state property where I am storing value of Item=5 and I create UrlParam Where I am storing URL but I need Item numeric value in URL property. I am new to React , Somebody please help me how to do this ?

I am not getting number value currently I am getting string. You may see in attachment .

Code

    this.state={    
    Item : 5,
    Skip:0,
    urlParams:'http://localhost:3001/meetups?filter[limit]=Item&&filter[skip]=Skip'
    }

Have you tried using interpolation (`{Skip}` or `{this.state.Skip}`)? I'm a bit rusty. — isherwood, Mar 20 '19 at 19:59
I'm not sure I understand your question... could you clarify and include a larger code sample, including the components you are working on? — Garrett Motzner, Mar 20 '19 at 19:59
Related: https://stackoverflow.com/questions/3173610/can-a-javascript-object-property-refer-to-another-property-of-the-same-object — isherwood, Mar 20 '19 at 20:00
@GarrettMotzner , I updated my question , Please have a look to given attachment . Thanks — Andrew, Mar 20 '19 at 20:01
I'm assuming your code sample is in the constructor? because outside of the constructor, it is a bad idea to do `this.state=` or modify the state (like `this.state.foo=` or similar). — Garrett Motzner, Mar 20 '19 at 20:12

varoons · Answer 1 · 2019-03-20T20:07:48.360

2

Set it after.

this.state={    
    Item : 5,
    Skip:0,
    urlParams:''
}

this.setState({ urlParams: 'http://localhost:8001/parties?filter[limit]=' + this.state.Item + '&filter[skip]=' + this.state.Skip })

OR

this.setState({ urlParams: `http://localhost:8001/parties?filter[limit]=${this.state.Item}&filter[skip]=${this.state.Skip}` })

You could also create functions to update the url anytime the Item or Skip value changes

updateItem(newValue) {
   this.setState({ 
      Item: newValue, 
      urlParams: `http://localhost:8001/parties?filter[limit]=${newValue}&filter[skip]=${this.state.Skip}`
   })
}

edited Mar 20 '19 at 20:07

answered Mar 20 '19 at 20:02

varoons

3,807
1
16
20

I want to use it in state . not outside . Could you please help – Andrew Mar 20 '19 at 20:06
If you already know the values OR are passing them as variables to set your initial state you can use the same to set the url. – varoons Mar 20 '19 at 20:08
I am getting Error : TypeError: Cannot read property 'Item' of undefined – Andrew Mar 20 '19 at 20:26

leander · Answer 2 · 2019-03-20T20:10:14.560

If I've understood you correctly, you want to use the Item state in your urlParams state. This cannot be done in the state declaration without using some sort of helper function, so a better alternative is to call setState() in order to declare urlParams after the fact.

In a React component, this may look something like:

state = {
  Item: 5,
  Skip: 0,
  urlParams: "",
}

componentDidMount() {

  ...

  this.setState((prevState) => { 
    urlParams: `filter[limit]=${prevState.Item}&&filter[skip]=${prevState.Stem}`
  }

  ...

}

It may seem like a hastle if you're new to React, but it's the best way to go since you should never modify state directly.

// good
this.setState((prevState) => ...)

// bad
this.state.urlParams = `...`

Read this section of the docs for more info.

You shouldn't have to splat `prevState` when using `setState`, because react does that for you, iirc... (unless you want to overwrite `urlParams` with the previous value if it is set...) — Garrett Motzner, Mar 20 '19 at 20:08

How to access other state/property value in new state prop

2 Answers2