Add field item transfers from sort form to grocery list form

src/App.js

@@ -113,7 +113,10 @@ function DarkInput(p){
 	return <input type="text" className="bg-dark text-white" {...p}></input>
 }
 
-function SorterApp(){
+function SorterApp(p){
+
+	const { setTransferItems } = p
+	const { transferItems } = p 
 
 	function submitForm(){
 		if (item1.length>0&&item2.length>0&&item3.length>0&&item4.length>0&&item5.length>0&&
@@ -217,19 +220,40 @@ function SorterApp(){
 
 	const [checking,setChecking] = useState(false)
 
+	useEffect(()=>{
+		if (result1===SUCCESS&&result2===SUCCESS&&result3===SUCCESS&&result4===SUCCESS&&result5===SUCCESS){
+			setTransferItems([item1,item1_2,item2,item2_2,item3,item3_2,item4,item4_2,item5,item5_2])
+		}
+	},[result1,result2,result3,result4,result5])
+
+	useEffect(()=>{
+		if (transferItems.length===10){
+			setItem1(transferItems[0])
+			setItem1_2(transferItems[1])
+			setItem2(transferItems[2])
+			setItem2_2(transferItems[3])
+			setItem3(transferItems[4])
+			setItem3_2(transferItems[5])
+			setItem4(transferItems[6])
+			setItem4_2(transferItems[7])
+			setItem5(transferItems[8])
+			setItem5_2(transferItems[9])
+		}
+	},[JSON.stringify(transferItems)])
+
 	return <>
 	<Row className="text-white" style={{background:result1===NONE?"":result1===SUCCESS?"#003300":result1===NOTFOUND?"#333300":"#330000"}}>
 		<Col>
 			Ending {retainerNames[0]} Item 1:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item1} onChange={(f)=>{setItem1(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item1" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item1} onChange={(f)=>{setItem1(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			Beginning {retainerNames[1]} Item 1:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item1_2} onChange={(f)=>{setItem1_2(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item1_2" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item1_2} onChange={(f)=>{setItem1_2(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			{result1===NONE?<></>
@@ -243,13 +267,13 @@ function SorterApp(){
 			Ending {retainerNames[1]} Item 2:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item2} onChange={(f)=>{setItem2(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item2" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item2} onChange={(f)=>{setItem2(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			Beginning {retainerNames[2]} Item 2:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item2_2} onChange={(f)=>{setItem2_2(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item2_2" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item2_2} onChange={(f)=>{setItem2_2(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			{result2===NONE?<></>
@@ -263,13 +287,13 @@ function SorterApp(){
 			Ending {retainerNames[2]} Item 3:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item3} onChange={(f)=>{setItem3(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item3" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item3} onChange={(f)=>{setItem3(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			Beginning {retainerNames[3]} Item 3:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item3_2} onChange={(f)=>{setItem3_2(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item3_2" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item3_2} onChange={(f)=>{setItem3_2(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			{result3===NONE?<></>
@@ -283,13 +307,13 @@ function SorterApp(){
 			Ending {retainerNames[3]} Item 4:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item4} onChange={(f)=>{setItem4(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item4" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item4} onChange={(f)=>{setItem4(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			Beginning {retainerNames[4]} Item 4:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item4_2} onChange={(f)=>{setItem4_2(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item4_2" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item4_2} onChange={(f)=>{setItem4_2(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			{result4===NONE?<></>
@@ -303,13 +327,13 @@ function SorterApp(){
 			Ending {retainerNames[4]} Item 5:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item5} onChange={(f)=>{setItem5(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item5" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item5} onChange={(f)=>{setItem5(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			Beginning {retainerNames[5]} Item 5:
 		</Col>
 		<Col>
-			<DarkInput onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item5_2} onChange={(f)=>{setItem5_2(f.currentTarget.value);}}></DarkInput>
+			<DarkInput name="item5_2" onKeyDown={(k)=>{if (k.key==='Enter') {submitForm()}}} value={item5_2} onChange={(f)=>{setItem5_2(f.currentTarget.value);}}></DarkInput>
 		</Col>
 		<Col>
 			{result5===NONE?<></>
@@ -327,9 +351,15 @@ function SorterApp(){
 	</>
 }
 
-function ListApp(){
+function ListApp(p){
+
+	const {transferItems} = p
+
 	return <>
 	<h1>List App!</h1>
+	<ul>
+		{transferItems.map((item)=><li style={{color:"white"}}>{item}</li>)}
+	</ul>
 	</>
 }
 
@@ -351,6 +381,8 @@ function App() {
 
 	const [nav,setNav] = useState("main")
 
+	const [transferItems,setTransferItems] = useState([])
+
 	function LZ(digits,numb) {
 		return "0".repeat(digits-String(numb).length)+numb
 	}
@@ -548,8 +580,8 @@ function App() {
 								</Col>
 							</Row>
 						:
-						nav==="sort"?<SorterApp></SorterApp>:
+						nav==="sort"?<SorterApp transferItems={transferItems} setTransferItems={setTransferItems}></SorterApp>:
-						nav==="list"?<ListApp></ListApp>:
+						nav==="list"?<ListApp transferItems={transferItems}></ListApp>:
 						<></>
 					}
 		<div style={{pointerEvents:"none",position:"fixed",top:"0px",left:"0px",width:"100%",height:"100%"}}>