onClick is not working in stateless functional component React

I tried to call a function inside onClick in stateless functional component but it's not working. It works when I use statefull component with class Clock extends React.Component and onClick={this.play}.

I have st like this: (edited below)

const Clock = function() {

  let second = 0;
  let minute = 25;

  const play = function() {
    if (second == 0) {
      second = 59;
    }
  }

  const style2 = {margin: "10px", fontSize: "30px"};
  let min = ('0' + minute).slice(-2);
  let sec = ('0' + second).slice(-2);

  return (
    <div>
      <div id="time-left" style={style2}>{min}:{sec}</div\>
      <div id="start_stop" style={style2} onClick={play}>Icon</div\>
    <div\>
  );
}

ReactDOM.render(<Clock/\>,document.getElementById("root"));

Here's my new code:

import React, { useState } from "https://cdn.skypack.dev/[email protected]" //I use "from "react" " but codepen.io autocorrect to this link

const Clock = function() {
  
  const [minute, setMinute] = useState(25);
  const [second, setSecond] = useState(0);

  const play = function() {
    if (second == 0) {
      setSecond(59);
    } else if (second < 60 && second > 0) {
      setSecond(second - 1);
    }
  } //I intend to use setInterval later to call this function every sec to make a countdown clock

  let min = ('0' + minute).slice(-2);
  let sec = ('0' + second).slice(-2);

  return (
    <div>
      <div id="start_stop" onClick={() => play()}><i class="fas fa-play"></i></div>
      <div id="time-left">{min}:{sec}</div>
    </div>
  )
}
ReactDOM.render(<Clock/>,document.getElementById("root"));

Solution

so, i made an answer instead of a comment.

i see you're missing a parenthesis and react uses the class keyword, so you need to use className=


// above code...

  return (
    <div>
      <div id="start_stop" onClick={() => play()}><i className="fas fa-play"></i></div>
      <div id="time-left">{min}:{sec}</div>
    </div>
  )
} // <= here missing this

ReactDOM.render(<Clock/>,document.getElementById("root"));

for the cdn of react i'd use a link in the html like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>

so the entire html is like this:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React CDN Usage</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</body>
</html>

you can see the example here: https://codepen.io/forest-black/pen/eKVMQW

ps: if you're learning react, i highly suggest to use stackblitz or codesandbox, they have a better code linting and code editor