<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.