CODEWITHSUNDEEP
javascriptreact-native
Bartek Spitza
Bartek Spitza

Reputation: 305

Disable buttons from parent

I am creating a Quiz app for the sake of learning React Native.

I want that when a user presses an answer, all buttons should be disabled. I have no idea how to do this, I have tried all different approaches, like changing props of the buttons from the parent, setting state from the parent etc. I just can't figure it out. I can make the clicked button disabled, but that doesn't help since the other buttons are still clickable.

Parent

class Container extends Component {
    state = { currentQuestion: questions[0] }
    buttons = new Array();

    componentWillMount() {
        this.makeButtons();
    }

    makeButtons() {
        for (let i = 0; i < 4; i++) {
            const isCorrect = (i === 0); //the first answer is correct, this is how I keep track
            const btn = (
                <Button
                    key={i}
                    title={this.state.currentQuestion[i]}
                    isCorrect={isCorrect}
                />
            );
            this.buttons.push(btn);
        }
        shuffle(this.buttons);
    }

    render() {
        return (
            <View style={containerStyle}>
                <Text style={textStyle}>
                    {this.state.currentQuestion.title}
                </Text>

                {this.buttons}
            </View>
        );
    }
}

Button

class Button extends Component {
    state = { color: "rgb(0,208,196)" };

    handleEvent() {
        const newColor = (this.props.isCorrect) ? "green" : "red";
        this.setState({ color: newColor });
        this.props.onPress();
    }

    renderButton() {
        return (
            <TouchableOpacity
                style={buttonStyle}
                onPress={this.handleEvent.bind(this)}
                disabled={this.props.disabled}
            >
                <Text style={textStyle}>
                    {this.props.title}
                </Text>
            </TouchableOpacity>
        );
    }

    render() {
        return this.renderButton();
    }
}

Upvotes: 0

Views: 517

Answers (1)

Jpoliachik
Jpoliachik

Reputation: 2638

You are creating your button components within an instance variable once when the parent component loads, but never re-rendering them. This is an anti-pattern of React. Ideally, your components should all be rendered within render(), and their props should be computed from state, so you only need to worry about updating the state correctly and all your components render properly.

In this case, you should construct the data for your buttons at component load, save your button data within state, and render your buttons within render(). Add a "disabled" state to your Button component, and when a user presses one of the buttons, use a callback to set "disabled" state in the parent component, and all your buttons will re-render to be properly disabled.

Upvotes: 1

Related Questions