Front End Development Libraries Projects - Build a 25 5 Clock

JavaScript
1

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) => {
    console.log("hi")
    if (e.target.className == "session"){
      this.setState({
        workTime: this.state.workTime += 1
      })
    }
    if (e.target.className == "break"){
      this.setState({
        breakTime: this.state.breakTime += 1
      })
    }
  }
  render(){
    return(
      <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>
      </div>
    )
  }
}
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/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

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.

3

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

4

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