Table not updating with useState

Viewed 30

I'm trying to create dynamic table that with display rows that has been chose from dropdown menu. I'm getting the data from MongoDB and when user choosing item from the drop table, I save it to array with useState HOOK. The array updating well, but the table below (that its rows mapped from the array ), are not updating, only the first choose is getting displayed.

export default function Table() {
  const [clientsList,setClientList]=useState([])
  useEffect(() => {
    Axios.get("http://localhost:3002/getClients").then((response) => {
      setClientList(response.data);
      
    });
  }, []);

  const [displayClient,setDisplayClient]=useState([])
  return (
        <div className='big'>
    <div className='header'>
      
        <form className='form-group' action="" method="get">
        <div className='dropdown'>
        <Multiselect
              name='name'
              options={clientsList}
              displayValue="key"
              groupBy="category"
              showCheckbox={true}

              onSelect={(event)=>{
                setDisplayClient((event))
                console.log(displayClient);
              }}
              onRemove={(event)=>{
                console.log(displayClient); 
                setDisplayClient(event)
              }}
             
            />
            </div>
        &nbsp; &nbsp; 
            <label >From Date:</label> &nbsp; &nbsp; 
            <input type="date" name="fromdate" id="" /> &nbsp; &nbsp; 
            <label >To Date:</label> &nbsp; &nbsp; 
            <input type="date" name="todate" id="" />&nbsp; &nbsp;  &nbsp; &nbsp; 
            <input type="submit" value="submit" />&nbsp; &nbsp; &nbsp; &nbsp; 
            <label >Auto Refresh</label>
            <input type="checkbox" name="" id="" />
        </form>
     </div>


     <div className='stats'>   
    <table>
      <tbody>
      <tr>
           <th>Customer</th>
           <th>Date</th>
           <th>Messages Sent</th>
           <th>Messages Matched</th>
           <th>Goodput</th>
           <th>Missmatch</th>
           <th>False Positive</th>
           <th>Runtime</th>
           {/* &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp;  */}
        </tr>

        {displayClient.map(item=>(
               <Stats
               name={item.name}
               date={item.date}
               m_sent={item.m_sent}
               m_match={item.m_match}
               goodput={item.goodput}
               mm={item.mm}
               fp={item.fp}
               runtime={item.runtime}
               on
               />
               ))}
      </tbody>
      </table>
      </div>
  </div>
  )
}
import React from 'react'

function Stats(props) {
  return (
    <tr>
         <td>{props.name}</td>
         <td>{props.date}</td>
         <td>{props.m_sent}</td>
         <td>{props.m_match}</td>
         <td>{props.goodput}</td> 
         <td>{props.mm}</td>
         <td>{props.fp}</td>
         <td>{props.runtime}</td>
    </tr> 
  )
}
export default Stats
0 Answers
Related