Author: John Au-Yeung

To create a countdown timer in React, we use the react-countdown package.

To install it, we run

npm i react-countdown

Then we write

import React from "react";
import ReactDOM from "react-dom";
import Countdown from "react-countdown";

const Completionist = () => <span>You are good to go!</span>;

ReactDOM.render(
  <Countdown date={new Date("2022-09-26T10:05:29.896Z").getTime()}>
    <Completionist />
  </Countdown>,
  document.getElementById("root")
);

to add the Countdown component to start the count down from the date prop value.

We render Completionist if the count down timer is finished.

Sometimes, we want to create custom functions in a React component.

In this article, we’ll look at how to create custom functions in a React component.

How to create custom functions in a React component?

To create custom functions in a React component, we just add them into the component class.

For instance, we write

export default class Archive extends React.Component {
  saySomething(something) {
    console.log(something);
  }

  handleClick(e) {
    this.saySomething("element clicked");
  }

  componentDidMount() {
    this.saySomething("component did mount");
  }

  render() {
    return <button onClick={this.handleClick.bind(this)} value="Click me" />;
  }
}

to add the saySomething and handleClick methods into the Archive component.

Conclusion

To create custom functions in a React component, we just add them into the component class.