CODEWITHSUNDEEP
react-native
Shashika Virajh
Shashika Virajh

Reputation: 9477

react native function always returns true

In my application, I want to disable an icon conditionally. Here is my code.

<View style={styles.controlsContainer}>
                    <WorkoutProgressControls 
                        videoPaused={this.state.videoPaused}
                        onPrevious={() => alert("PREVIOUS MOVEMENT")}
                        onPause={() => this._onPauseVideo()}
                        onNext={() => this.getNextMovement()}
                        disableNext={() => 1 === 1 ? false : true}
                    />
                </View>

When I set disableNext to true or false, it works properly. But when I tried to change it conditionally or using a function, it always gets disabled.

this is my component which set the disableNext prop.

 <DisableableIcon
                iconStyles={styles.icon}
                resizeMode="contain"
                source={Next}
                height={35}
                width={35}
                disabled={props.disableNext}
                onIconPressed={props.onNext}
            />

What is the issue here? Why does this work when I set disableNext to true and false, but returns true always when I try to set it conditionally?

Upvotes: 0

Views: 134

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

You're trying to pass a function as a prop, therefore to make it work either don't use a function or invoke it as a function in your component.

...
disableNext={() => 1 === 1 ? false : true}
...

...
disabled={props.disableNext()}
...

OR

...
disableNext={1 === 1 ? false : true}
...

...
disabled={props.disableNext}
...

Upvotes: 1

Related Questions