Category: React

Sometimes, we want to disable button in React.

In this article, we’ll look at how to disable button in React.

How to disable button in React?

To disable button in React, we can set the disabled prop.

For instance, we write

<button disabled={value}>button</button>;

to set the disabled prop to the value state.

Conclusion

To disable button in React, we can set the disabled prop.

Sometimes, we want to fix onClick being called on render with React.

In this article, we’ll look at how to fix onClick being called on render with React.

How to fix onClick being called on render with React?

To fix onClick being called on render with React, we can set the onClick prop to a function reference.

For instance, we write

const Square = ({ value }) => {
  return (
    <button className="square" onClick={() => alert("click")}>
      {value}
    </button>
  );
};

to set the onClick prop to a function that shows an alert box.

The function is called only when we click the button since we pass in the function’s reference rather than its returned value.

Conclusion

To fix onClick being called on render with React, we can set the onClick prop to a function reference.

Sometimes, we want to add onClick event handler with React.

In this article, we’ll look at how to add onClick event handler with React.

How to add onClick event handler with React?

To add onClick event handler with React, we set the onClick prop of an element to a function that runs when we click on the element.

For instance, we write

const ActionLink = () => {
  const handleClick = (e) => {
    e.preventDefault();
    console.log("The link was clicked.");
  };

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
};

to set the onClick prop of the a element to the handleClick function.

In handleClick, we call e.preventDefault to prevent the default action of navigating to the URL set as the value of the href attribute.

Then we call console.log to log some text.

Conclusion

To add onClick event handler with React, we set the onClick prop of an element to a function that runs when we click on the element.

Sometimes, we want to use setInterval in a React app.

In this article, we’ll look at how to use setInterval in a React app.

How to use setInterval in a React app?

To use setInterval in a React app, we call setInterval in the useEffect hook callback.

For instance, we write

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Clock = () => {
  const [currentCount, setCount] = useState(10);
  const timer = () => setCount(currentCount - 1);

  useEffect(() => {
    if (currentCount <= 0) {
      return;
    }
    const id = setInterval(timer, 1000);
    return () => clearInterval(id);
  }, [currentCount]);

  return <div>{currentCount}</div>;
};

const App = () => <Clock />;

to call useEffect with a callback that calls setInterval to run the timer function every 1000 milliseconds.

We return a function that calls clearInterval with the timer id to clear the timer when currentCount changes.

Conclusion

To use setInterval in a React app, we call setInterval in the useEffect hook callback.

Sometimes, we want to fix setTimeout() not working with React.

In this article, we’ll look at how to fix setTimeout() not working with React.

How to fix setTimeout() not working with React?

To fix setTimeout() not working with React, we can use call setState in the setTimneout callback.

For instance, we write

setTimeout(() => this.setState({ position: 1 }), 3000);

to call setTimeout with a callback that calls this.setState.

We use an arrow function for the callback since it doesn’t bind to its own value of this.

This means this will still be the component instance.

Conclusion

To fix setTimeout() not working with React, we can use call setState in the setTimneout callback.