Error when using if, when updating the state in react

Question

I wanted to update this variable when the condition is true, but it doesn't let me, thanks

 constructor(props){
        super(props);
        var isActive = false;

        this.props.items.map(item => (
                if(item.name == this.props.product.name) {
                    isActive = true;
                }
        ));

        this.state = {
            active: isActive
        };

        console.log(isActive);
        this.handleClick = this.handleClick.bind(this);

    }

Are there any errors in the Javascript console? That doesn't look like valid Javascript syntax, but I don't know if react fixes it up. — Barmar
– Barmar, Commented Mar 24, 2017 at 19:47
In normal JS you can't have if inside parentheses, you should have {} around the function body. — Barmar
– Barmar, Commented Mar 24, 2017 at 19:48
because is in the constructor, we cannot call setState in the constructor — David Vittori
– David Vittori, Commented Mar 24, 2017 at 19:58

Mayank Shukla · Accepted Answer · 2017-03-24 20:10:01Z

1

Reason is, you forgot to use {}, If you are using any condition or wants to do some calculation use {} and put all the statement inside that. One more thing since you just want to iterate the array means not returning anything, so i that case use forEach instead of map, Use this:

this.props.items.forEach(item => { //here
    if(item.name == this.props.product.name) {
          isActive = true;
    }
});

Check this code it will produce the same error:

[1,2,3,4].forEach(el=>(
     if(el % 2 == 0)
         console.log(el);
))

Check the working example:

[1,2,3,4].forEach(el=>{
         if(el % 2 == 0)
             console.log(el);
})

edited Mar 24, 2017 at 20:10

answered Mar 24, 2017 at 20:00

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

2 Comments

Ved Over a year ago

it should be like this: this.props.items.forEach((item) => { //here if(item.name == this.props.product.name) { isActive = true; } });

Mayank Shukla Over a year ago

@Ved didn't get you, what's the difference ? he is using single argument so () is not required with item. That is useful when someone need the index also, means multiple arguments :)

Community · Accepted Answer · 2017-05-23 12:32:26Z

0

You really aren't passing an 'active' property nor state. You are trying to set a computed property, much like Ember (see How to setup Ember like computed properties in Immutablejs and Redux and Flux and React). This was considered for React and dismissed.

You should just create a function, isActive() and call it when needed. I expect you only need it when rendering a set of individual item components for which isActive is a property.

That said, there are ways of cramming this into a React codebase, but your code will be unmaintainable.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 24, 2017 at 20:13

Charles Merriam

20.7k7 gold badges77 silver badges84 bronze badges

Collectives™ on Stack Overflow

Error when using if, when updating the state in react

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related