My current setup involves a button named download, which is a component integrated into my interface. The functionality associated with this button is implemented within a container.
I intend for the button to remain hidden by default unless a specific condition (i.e., "(i === number)" in the download function) is met.
The challenge lies in the fact that this condition can only be evaluated upon clicking the "download" button. This presents an obstacle as I am unsure how to preemptively validate this logic to determine whether the button should be displayed or not.
Could you provide assistance with resolving this issue? My attempt to establish a state variable for displaying the button has been unsuccessful.
The code snippet I have currently is as follows:
Container:
state = {
showButton: false,
};
componentDidMount() {
this.download();
};
download = async () => {
const data = await this.props.client
.query({
query: numberQuery,
fetchPolicy: "no-cache",
})
// retrieve data from number query ....
const contentData = data.data.content;
// retrieve and format numbers
const numbers = this.getNumbers(contentData);
// call get number and get the individual number here
const number = await this.getNumber();
numbers.forEach((i) => {
// check if numbers contain the number from getNumber(), if number matches number in numbers
if (i === number) {
this.setState({
showButton: true,
});
// call functions, start downloading
};
});
};
render() {
return (
{this.state.showButton ?
<Download
onStartDownload={() => this.download()}
/> : null}
);
};
Component:
class Download extends Component {
state = {
startDownload: false,
};
startDownload = () => {
this.props.onStartDownload();
};
render() {
return (
<Fragment>
<Button
id="download"
onClick={this.startDownload}
>
Download
</Button>
</Fragment>
);
};
};