Front End Development Libraries Projects - Build a 25 5 Clock

Tell us what’s happening:
Hi. So I am working on a last project for Front End Development Libraries which you should build 25 + 5 clock. I am using React. The problem is that onClick doesn’t work. When it should fire a function it does nothing, not even print “hi” in the console. I probably did some type error but I can’t find it. I am also using react only for about 2 weeks now so any beginer friendly explination would help :). Thank you.

Your code so far

class App extends React.Component{
  state = {
    workTime: 25,
    breakTime: 5
  handleIncrement = (e) => {
    if ( == "session"){
        workTime: this.state.workTime += 1
    if ( == "break"){
        breakTime: this.state.breakTime += 1
      <div className="app">
        <p>Session length <div onCLick={this.handleIncrement} id="1" className="session" >+</div> {this.state.workTime} <div className="session">-</div></p>
        <p >Break length <div className="break" onCLick={this.handleIncrement}>+</div> {this.state.breakTime} <div className="break">-</div></p>
ReactDOM.render(<App />, document.getElementById('app'));`Preformatted text`

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Front End Development Libraries Projects - Build a 25 + 5 Clock

Link to the challenge:

Hi @roki.habic

Welcome to FCC. It is onClick not onCLick. And I don’t think you should be using a div. Please change it to a button element.

Thank you so much. I didn’t saw this silly mistake : )

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.