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

Why is my code not rendering please help, as soon as i enter the reactusestate codelines it stops rendering. please explain why that is and how to fix it

const App=()=>{
  const [timeLeft, setTimeLeft]=React.useState(5);
  const [SessionLengthest, setSessionLengthest]=React.useState(5);
  
  return(<div id="container">
      <Happy/>
      <Break/>
      <Session/>
      <Timer/>
  </div>)}

const Happy=()=><div id="title">25+5 clock</div> 

const Break=()=>{return (<div id="break-label">Break Length
    <strong id="break-length"> {BreakLengthest} </strong>
    <i id="break-increment" onClick={handlebreakupchange} className="fas fa-arrow-up"> </i> 
    <i id="break-decrement" onClick={handlebreakdownchange} className="fas fa-arrow-down"> </i> </div>)}

const Session=()=>{return (<div id="session-label">Session Length
    <strong id="session-length"> {SessionLengthest} </strong>
    <i id="session-increment" onClick={handlesessionupchange} className="fas fa-arrow-up"> </i>  
    <i id="session-decrement" onClick={handlesessiondownchange} className="fas fa-arrow-down"> </i></div>)}

const Timer=()=>{return (<div id="timer"> {SessionOrBreak} 
    <strong> {timeLeft}</strong> 
    <i id="start_stop" onClick={handlethisplay} className="fas fa-play girl"> </i> 
    <i id="start_stop" onClick={handlethispause} className="fas fa-pause hurl"> </i> 
    <i id="reset" onClick={handlethisredo} className="fas fa-redo"> </i> </div>)}



const SessionOrBreak=()=>{return null}
const BreakLengthest=()=>{return null}
const SessionLengthest=()=>{return null}


const handlethisredo=(event)=>{return null}
const handlethispause=(event)=>{return null}
const handlethisplay=(event)=>{return null}
const handlesessiondownchange=(event)=>{return null}
const handlesessionupchange=(event)=>{return null}
const handlebreakdownchange=(event)=>{return null}
const handlebreakupchange=(event)=>{return null}





ReactDOM.render(<App/>,document.getElementById('root'))

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

Challenge Information:

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

What platform are you coding this on?

Can we see the line where you import react?

Any console messages / errors?

im using codepen, so the react, reactDOM and babel are from the settings and not really import; the only console message is

Uncaught ReferenceError: timeLeft is not defined
at Timer (pen.js?key=pen.js-e0711bfa-2270-cb91-9608-4ca1e0b3479c:25:44)
at of (react-dom.production.min.js:109:301)
at Rk (react-dom.production.min.js:250:214)
at Si (react-dom.production.min.js:195:185)
at Pk (react-dom.production.min.js:195:116)
at Nd (react-dom.production.min.js:194:492)
at Mi (react-dom.production.min.js:189:179)
at db (react-dom.production.min.js:79:182)
at zb (react-dom.production.min.js:190:156)
at $k (react-dom.production.min.js:213:125)
Timer @ pen.js?key=pen.js-e0711bfa-2270-cb91-9608-4ca1e0b3479c:25
of @ react-dom.production.min.js:109
Rk @ react-dom.production.min.js:250

Si @ react-dom.production.min.js:195
Pk @ react-dom.production.min.js:195
Nd @ react-dom.production.min.js:194
Mi @ react-dom.production.min.js:189
db @ react-dom.production.min.js:79
zb @ react-dom.production.min.js:190
$k @ react-dom.production.min.js:213
Wd @ react-dom.production.min.js:213
Q.render @ react-dom.production.min.js:266
(anonymous) @ pen.js?key=pen.js-e0711bfa-2270-cb91-9608-4ca1e0b3479c:49

im not sure whats going on honestly. Didnt i define it already in the const?

Can you show a screenshot of the settings in codepen?

I had a problem like this and I needed to use a different address to access react. It looks like I had these:

https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js

Is that the same, and same versions, as you have?

they are,
https://codepen.io/maryam-ijaz/pen/rNRZXxq
this is my codepen link, so you can check the settings and the code more easily

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