如何在reactjs的双重列表中添加和编辑列表项？

Question

I am pretty new to React js and trying different ways to make a to-do list to understand it further. I have a parent component that renders two child components. I figured out how to transfer the items between the two lists. How do I add items to the 2 lists separately from the UI? I am not able to figure that out. I need two input textboxes for each list and also should be able to edit the list items. Can anybody please help me?

 import React,{useState,useEffect} from 'react' import { Completed } from './Completed' import { Pending } from './Pending' export const Items = () => { const [items,setItems]=useState([ { id: 1, title:'Workout', status:'Pending' }, { id: 2, title:'Read Books', status:'Pending' }, { id: 3, title:'Cook Pizza', status:'Pending' }, { id: 4, title:'Pay Bills', status:'Completed' }, { id: 5, title:' Watch Big Short', status:'Completed' }, { id: 6, title:' Make nutrition Plan', status:'Pending' } ]) const updateStatus=(id,newStatus)=>{ let allItems=items; allItems=allItems.map(item=>{ if(item.id===id){ console.log('in here') item.status=newStatus; } return item }) setItems(allItems) } return ( <div class="items"> <Pending items={items} setItems={setItems} updateStatus={updateStatus}/> <Completed items={items} setItems={setItems} updateStatus={updateStatus}/> </div> ) } import React from 'react' export const Completed = ({items,setItems,updateStatus}) => { return ( <div className="completed"> <h1>RIGHT</h1> { items && items.map(item=>{ if(item && item.status==='Completed') return <><p className="item" key={item.id}>{item.title} <button className="mark_pending" key={item.id} onClick={()=>{updateStatus(item.id,'Pending')}}> Move Left</button></p></> }) } </div> ) } import React from 'react' export const Pending = ({items,setItems,updateStatus}) => { return ( <div className="pending"> <h1>LEFT</h1> { items && items.map(item=>{ if(item && item.status==='Pending') return <><p className="item" key={item.id}>{item.title} <button className="mark_complete" key={item.id} onClick={()=>{updateStatus(item.id,'Completed')}}>Move Right</button></p></> }) } </div> ) }

Answer 1

What do you mean by "separately from the UI"?

Answer 2

import React, { useState } from "react"; const initialStatus = "Pending"; const initialData = [ { id: 1, title: "Workout", status: "Pending", }, { id: 2, title: "Read Books", status: "Pending", }, { id: 3, title: "Cook Pizza", status: "Pending", }, { id: 4, title: "Pay Bills", status: "Completed", }, { id: 5, title: " Watch Big Short", status: "Completed", }, { id: 6, title: " Make nutrition Plan", status: "Pending", }, ]; const Box = ({ id, title, status, setItems, items }) => { return ( <button onClick={() => { const newItems = [...items]; const index = items.findIndex((v) => v.id == id); newItems[index].status = newItems[index].status == initialStatus ? "Completed" : initialStatus; setItems(newItems); }} > {title} </button> ); }; export const Items = () => { const [items, setItems] = useState(initialData); return ( <div style={{ display: "flex" }}> <div style={{ display: "flex", flexDirection: "column" }}> <h1>LEFT</h1> {items .filter((v) => v.status === initialStatus) .map((props) => ( <Box {...props} key={props.id} setItems={setItems} items={items} /> ))} </div> <div style={{ display: "flex", flexDirection: "column" }}> <h1>Right</h1> {items .filter((v) => v.status !== initialStatus) .map((props) => ( <Box {...props} key={props.id} setItems={setItems} items={items} /> ))} </div> </div> ); }; export default Items;