title: How to add and edit list items in a dual list in reactjs?
body: <p>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?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React,{useState,useEffect} from 'react'
  import { Completed } from './Completed'
  import { Pending } from './Pending'
  
  export const Items = () =&gt; {
      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)=&gt;{
          let allItems=items;
          allItems=allItems.map(item=&gt;{
              if(item.id===id){
                  console.log('in here')
                  item.status=newStatus;
              }
          return item
          })
          setItems(allItems)
      }
      return (
          &lt;div class="items"&gt;
             &lt;Pending items={items} setItems={setItems} updateStatus={updateStatus}/&gt;
             &lt;Completed items={items} setItems={setItems} updateStatus={updateStatus}/&gt;
          &lt;/div&gt;
      )
  }
  
  
  
  
  import React from 'react'
  
  export const Completed = ({items,setItems,updateStatus}) =&gt; {
      return (
          &lt;div className="completed"&gt;
              &lt;h1&gt;RIGHT&lt;/h1&gt;
              {
                      items &amp;&amp; items.map(item=&gt;{
                          if(item &amp;&amp; item.status==='Completed')
                          return &lt;&gt;&lt;p className="item" key={item.id}&gt;{item.title} &lt;button className="mark_pending" key={item.id} onClick={()=&gt;{updateStatus(item.id,'Pending')}}&gt; Move Left&lt;/button&gt;&lt;/p&gt;&lt;/&gt;
                      })
                  }
   
          &lt;/div&gt;
      )
  }
  
  
  
  import React from 'react'
  
  export const Pending = ({items,setItems,updateStatus}) =&gt; {
  
      return (
          &lt;div className="pending"&gt;
              &lt;h1&gt;LEFT&lt;/h1&gt;
  
                  {
                      items &amp;&amp; items.map(item=&gt;{
                          if(item &amp;&amp; item.status==='Pending')
                          return &lt;&gt;&lt;p className="item" key={item.id}&gt;{item.title} &lt;button  className="mark_complete" key={item.id} onClick={()=&gt;{updateStatus(item.id,'Completed')}}&gt;Move Right&lt;/button&gt;&lt;/p&gt;&lt;/&gt;
                      })
                  }
   
          &lt;/div&gt;
      )
  }</code></pre>
  </div>
  </div>
  </p>