<div id="root"></div>
import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
const {useState} = React;
const ideaList = ["I'm thankful for my friends",
"I'm thankful for my family",
"I'm thankful for my health",
"I'm thankful for my hobbies",
"I'm thankful for CSS Tricks Articles"]
function Parent(){
const [list,setList] = useState([]);
function onStatementComplete(payload){
setList(list=>[...list,payload]);
}
function reset(){
setList([]);
}
return <div>
<h1>Your thankful list</h1>
<p>A five point list of things you're thankful for:</p>
{list.map((item,index)=>{return <p>Item {index+1}: {item}</p>})}
{list.length<5? <StatementForm key={list.length} initialStatement={ideaList[list.length]} onStatementComplete={onStatementComplete}/>:<>
<p>This is your list for today.</p>
<button onClick={reset}>Reset</button>
</>}
</div>;
}
function StatementForm({initialStatement,onStatementComplete}){
const [statement,setStatement] = useState(initialStatement);
return <div>
<form onSubmit={(e)=>{e.preventDefault(); onStatementComplete(statement)}}>
<label htmlFor="statement-input">What are you thankful for today?</label><br/>
<input id="statement-input" onChange={(e)=>setStatement(e.target.value)} value={statement} type="text"/>
<input type="submit"/>
</form>
</div>
}
ReactDOM.render(<Parent/>,document.getElementById("root"))
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.