scrimba
Learn React Hooks in one hour
useRef Tutorial and Challenge
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

useRef Tutorial and Challenge
AboutCommentsNotes
useRef Tutorial and Challenge
Expand for more info
Playground.js
run
preview
console
import React, { useState, useEffect } from 'react'
import randomColor from 'randomcolor'

export default function Playground() {
const [count, setCount] = useState(30)

const [color, setColor] = useState(null)
useEffect(() => {
setColor(randomColor())
}, [count])

return (
<div style={{ borderTop: `10px solid ${color}`}}>
{count}
<button onClick={() => setCount(currentCount => currentCount - 1)}>-</button>
<button onClick={() => setCount(currentCount => currentCount + 1)}>+</button>
<hr />
<input type="range" onChange={e => setCount(e.target.value)} value={count} />
</div>
)
}
Console
index.html
-4:24