0

Please suggest how to Enable/Disable Toggle button from another component in ReactJS?

The idea is to Enable/Disable Toggle button from Statistics' fetchStatistics() function. When the logic of fetchStatistics() checks the response it should block Toggle button click or Enable click event for it.

  1. ProviderContainer - root container
var ProviderContainer = React.createClass({
    getInitialState: function() {
            
    },

    render() {
            return (
                <div className="app">
                        <Provider />
                        <Provider />
                </div>
            );
        }    
});
  1. Provider component
var Provider = React.createClass({
    getInitialState: function() {
            
    },

    render: function() {
        return (
            <li>
                 <Statistics />
                 <Toggle />
            </li>
        );
    }
});
  1. Statistics component
var Statistics = React.createClass({
    fetchStatistics: function() {
        let url = "https://localhost/statistics";

        fetch(url)
        .then(data => {
            if (data) {
                // Disable click for <Toggle> button
            } else {
                // Enable click for <Toggle> button
            }
        })
        .catch((error) => {
            console.log('error', error);
        });
    },

    render: function(){
        return(
            <div>
                ...
            </div>
        );
    }

});
  1. Toggle component
class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {

    }

    componentWillReceiveProps(nextProps) {
    }

    render() {
        return (
            <div className="toogle active" onClick={this.handleClick} >
                <div className="toggle__manage"></div>
            </div>
        );
    }
};

1 Answer 1

1

See the code below. I have modified the Provider, Statistics, and Toggle components.

In the Provider component you'll need to manage a allowToggle state which is passed down to the Toggle component. The state can be changed via the setAllowToggle function which is passed down to the Statistics component.

var Provider = React.createClass({
    getInitialState: function() {
        return {allowToggle: false};
    },


    setAllowToggle: function(allowToggle) {
        this.setState({ allowToggle });
    },

    render: function() {
        return (
            <li>
                 <Statistics setAllowToggle={this.setAllowToggle}/>
                 <Toggle allowToggle={allowToggle}/>
            </li>
        );
    }
});

In the Statistics component the setAllowToggle and is called with true or false as per the condition.

var Statistics = React.createClass({
    fetchStatistics: function() {
        let url = "https://localhost/statistics";

        fetch(url)
        .then(data => {
            if (data) {
                // Disable click for <Toggle> button
                this.props.allowToggle(false);
            } else {
                // Enable click for <Toggle> button
                this.props.allowToggle(true);
            }
        })
        .catch((error) => {
            console.log('error', error);
        });
    },

    render: function(){
        return(
            <div>
                ...
            </div>
        );
    }

});

In the Toggle component the allowToggle prop is used to decide whether to allow toggle or not. Also, the active css class and the onClick function are conditionally provided.

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
    }

    componentWillReceiveProps(nextProps) {
    }

    render() {
        return (
            <div 
                className={`toggle ${this.props.allowToggle ? 'active' : ''`}
                {...(this.props.allowToggle && {
                    onClick: this.handleClick
                })} 
            >
                <div className="toggle__manage"></div>
            </div>
        );
    }
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.