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.
- ProviderContainer - root container
var ProviderContainer = React.createClass({
getInitialState: function() {
},
render() {
return (
<div className="app">
<Provider />
<Provider />
</div>
);
}
});
- Provider component
var Provider = React.createClass({
getInitialState: function() {
},
render: function() {
return (
<li>
<Statistics />
<Toggle />
</li>
);
}
});
- 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>
);
}
});
- 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>
);
}
};