CODEWITHSUNDEEP
javascriptreactjs
Robert Gurjiev
Robert Gurjiev

Reputation: 520

How to set button unvisible when timer count === 0 in React.js?

I am new in React.js and I have a question.

I want to send a feedback by button click. It is sending via axios request with timeout 3 seconds.

I put Cancel button if user wants to cancel sending feedback for this timeout (3 seconds) - (and axios request is being cancelled as well).

Then, I put timer on button, but it is situated under text even I use <span>. I attached code to codesandbox. Now it is test mode, just need to fix:

Any help will be appreciated. Thanks!

Upvotes: 1

Views: 753

Answers (2)

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

You have two make two changes here,

1) In send.js file make changes in following under sendApi() method,

setTimeout(() => {
  this.setState({
    isLoading: false
  });
  console.log("Ok");
}, 4000);

As the cancel button is populated only when isLoading is true, you can make it to false inside sendApi() method after the setTimeout to remove it after the given time.

2) To make the timer count and cancel text to stay in line of the button,

Under timer.js change the return statement under render() method like,

return (
  <React.Fragment>{count}</React.Fragment>
);

Forked sandbox

Upvotes: 1

Anh Tuan
Anh Tuan

Reputation: 1143

  doIntervalChange = () => {
    if (this.state.count === 0) {
      this.hide();
    }
    this.myInterval = setInterval(() => {
      this.setState(
        prevState => ({
          count: prevState.count - 1
        }),
        () => {
          if (this.state.count === 0) this.hide();
        }
      );
    }, 1000);
  };

doIntervalChange just run 1 time when you place it in comp did mount , try this code :D

Upvotes: 1

Related Questions