Load table with selected DropDown value?

Question

I have 2 component, the main page has a drop down, when a user makes a selection, I want to pass that ID to the component that has the Table to show the data on it. Right, now, it's showing the data, however, it's appending to it, so I can see the data from of the previous selection as well as the new selection. How can I get it to show only the data for the selected value?

main component:

    useEffect(() => {
      getCustomers(custId)

    }, [custId]);

    const getCustomers = async (custId) => {
     //calls the API to load the drop down with a list of customers
    
    }

    const customerChange = async (e) => { 
       setCustomerId(e.target.value)
     }

    return {
      <div>
         <select id="customers" onChange={customerChange}> 
            <option value="0">Select Customer</option>
            {customer.map(data => (
                 <option value={data.customerId}>{data.CustomerName}</option>
            )}
      </div>

    }

The table component:

const customerNotes = ({ custId }) => {

    useEffect(() => {
       getCustNotes(custId)
    }, [custId]);

//loads the react data table

        const getCustNotes = async(custId) => { 
           custNotes.GetNotes(custId) //call to the API
              .then((response) => {
                 setCustNotes(response.data) 
              })
              .catch(e) => { console.log(e) }
        }
    }

what could be causing my data in the table not to refresh completely and append rows instead of doing a full refresh with the new item selected in the dropdown?

Answer 1

You need to add a key attribute on elements you generate using map() or similar. The key attribute must be unique. It was missing when you build your dropdown menu. Added here:

return {
  <div>
     <select id="customers" onChange={customerChange}> 
        <option value="0">Select Customer</option>
        {customer.map(data => (
             <option key={data.customerId} value={data.customerId}>{data.CustomerName}</option>
        )}
  </div>
}

If you are missing the key attribute on your table rows, it could cause weird behavior. (Possibly duplicate data appearing?). Make sure you have the key attribute in your table rows.

See also: react key attribute