scrimba
Reusable React
Components & refs
State in Class vs Function components
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

State in Class vs Function components
AboutCommentsNotes
State in Class vs Function components
Expand for more info
index.js
run
preview
console
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const CharacterCounterInput = ({ text, defaults }) => {
const [message, setMessage] = useState('')
const maxLength = 20

return <div className={`counterInput ${message.length > maxLength ? "tooLong" : ""}`}>
<div>
{defaults.map((b) => {
return <button key={b} onClick={() => {
setMessage(b)
}}>{b}</button>
})}
</div>
<textarea
placeholder={text}
value={message}
onChange={(event) => {
setMessage(event.target.value)
}}
/>
<div>{message.length}/{maxLength}</div>
</div>
}

const App = () => {
let defaultMoods = ["Great", "Okay", "Bad", "TERRIBLE"]

return (
<section>
<h2>Mood Tracker</h2>
<CharacterCounterInput text={"How was your day?"} defaults={defaultMoods}/>
</section>
)
}

ReactDOM.render(<App />, document.getElementById('root'));
Console
/index.html?
-7:14