反应中的待办事项列表 - 您将如何移动已完成的项目

Question

我对编码非常陌生，我正在尝试处理待办事项列表。 单击某个项目后，我希望可以选择将其标记为完成并将其移至“已完成的项目”列...

以下是目前代码明智的样子：

在我的 App.js 中

 

  function markAsCompleted(event) {
      event.preventDefault()
    // ask if an item is complete
    // if it is, move it to completed items 

    }

<li className = 'activities' onClick={markAsCompleted}
                key = {a.text}  > 
                    <FaPaintBrush onClick={ (i) => toggleColor (a) }/>
                     <div 
                     style = {{color: a.color }}>
                      Activity: {a.data.text},
                      Type: {a.data.area}
               </div>
               </li>

这是我完成的项目组件，现在除了标题之外不显示任何内容

function CompletedItems (props) {
    
    
  
      return (
       
        <label>
        Completed items

        </label>
       
    );
  }
  export default CompletedItems;
  

这是它在本地主机上的样子:) Local host

非常感谢您的帮助！ 朱莉