React can not access variable from return

Question

I am very new to React and I can not solve this issue for a very long time. The idea is the following, I get some user info from database and pass it into cookies. From react side I get this cookies as JSON object and I need to render menu for user depending on values in this object. Right now I pass this object that I get from cookies from parent Component and I try to access it from Settings component. The issue is that I can see access this object from test function, however when I try to access this data from return it gives me undefined error. The function that returns value from cookies is sync, I have no idea why that might happen, please help.....

In test function you are accesing this.state.shopSetting whereas in your component, you are accessing this.state.shopSettings (with an extra S at the end). What's weird is that test should log undefined. — Federico Alecci
– Federico Alecci, Commented Jul 6, 2020 at 2:29
I made a typo before making screenshot, it should be this.state.shopSettings in test, so no issues on that — bredart
– bredart, Commented Jul 6, 2020 at 2:32
Okey, what's the value of this.state.shopSettings if you console.log it in the render() function? It's possible that 'new_orders' key does not exist in the object. — Federico Alecci
– Federico Alecci, Commented Jul 6, 2020 at 2:33
When I call console.log(this.state.shopSettings) where enabled is defined I get expected object, new_orders is present in keys — bredart
– bredart, Commented Jul 6, 2020 at 2:36

Guru Hadadi · Accepted Answer · 2020-07-06 03:43:48Z

2

Since this.state.shopSettings["new_orders"] is boolean, use ternary.
Don't copy props to the state inside constructor as the constructor is executed only once. So updates to the props won't be reflected in the component.

Like this

<button onClick={this.test}>
  {props.shopSettings && (props.shopSettings["new_orders"] ? 'true button' : 'false button')}
</button>

edited Jul 6, 2020 at 3:43

answered Jul 6, 2020 at 2:53

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

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

5 Comments

bredart Over a year ago

Unfortunately did not help, it seems that this code overloaded my computer and browser, it became very laggy. Dont know why that happened. I get them as object for 100% since I use Cookies.getJSON

Guru Hadadi Over a year ago

ok - try {this.state.shopSettings && this.state.shopSettings)["new_orders"]} in the <button> ... if it doesn't work , then share the output of console.log ... also share more code if possible

bredart Over a year ago

Did not work, I have attached output of console.log(this.state.shopSettings) inside render. Also if try console.log(this.state.shopSettings['new_orders']) I get undefined

bredart Over a year ago

Also send project structure and component which gives this variable

bredart Over a year ago

This works as expected! Thank you, but is it possible to access this variables somehow? I will need to change them if user clicks on a button and so on, maybe there is better solution than cookies? I can build an api but I have questions about authentications, I run everything using next and koa right now

bredart · Accepted Answer · 2020-07-07 23:47:14Z

0

It solves very easily with this code, now I can access any key from shopSettings inside return without any issues

class Index extends React.Component {
    state = {
        shopSettings: Cookies.getJSON('shopSettings')
    }

    render() {
        const {shopSettings} = this.state

        if (!shopSettings) {
            return null
        }
        
        return (
          <div>Hello</div>
        )
    }

answered Jul 7, 2020 at 23:47

bredart

3281 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

React can not access variable from return

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related