Filtering Table State in React

user_5091483 0
Viewed 35

I have a table element with items set in an array of object that I am using to filter through.

Right now I have the filter working however I need to update the state of the profile items I am filtering through. I am showing the filtered items in a table, and selecting an item via a select dropdown.

I need to loop through profiles and find the value for BiosafetlyLevelId + update state for profiles.

How can I do this?

      useEffect(() => {
    setError(false)
    setLoading(true)

    // Get Data
    $.ajax({
      method: 'GET',
      url: `${API_HOST}/api-bsl`
    })
      .done((data) => {
        const profiles = JSON.parse(data)
        console.log('profile', profiles)
        setProfiles(
          profiles.length > 0 ? profiles.sort((a, b) => a.name.localeCompare(b.name)) : []
        )
        const selectProfile = createSelectList(profiles, 'biosafetyLevelId', 'name')
        setArrayState(selectProfile)
        setLoading(false)
      })
      .fail(() => {
        setError(true)
        setLoading(false)
        setProfiles(null)
      })
  }, [])

       <div className='content column white-bg search'>
                  <Select
                        options={arrayState}
                        onChange={(value) => setChangeState(value)}
                        value={changeState}
                        required
                        inForm
                        parentClass='form-group-column'
                        label='Select Biosafety Level'
                        addEmpty
                        emptyLabel='Select Biosafety Level'
                        id='user_type'
                        error={error && profiles === ''}
                      />
                </div>

        <table className='fixed-header lab-profile-menu-sub-row'>
            <thead>
              <tr>
                <th>Name</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {profiles !== null &&
                profiles.length > 0 &&
                profiles.map((profile) => (
                  <tr key={profile.uuid}>
                    <td>{profile.name}</td>
                    <td>
                      <Button
                        onClick={() => toggleBioProfileModal(profile, true)}
                        className='add-edit-button'
                      >
                        Edit
                      </Button>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
reactjs object forms arrays javascript
1 Answers

I think instead of updating the profiles state what you want to do is update a filter state and then use that to filter the profiles before you render them.

Something like:

const [filter, setFilter] = useState('')

const filteredProfiles = profiles.filter(({BiosafetlyLevelId}) => BiosafetlyLevelId === filter) // render these profiles

Then your select would be something like:

<Select
    options={arrayState}
    onChange={(value) => setFilter(value)}
    value={filter}
    required
    inForm
    parentClass='form-group-column'
    label='Select Biosafety Level'
    addEmpty
    emptyLabel='Select Biosafety Level'
    id='user_type'
    error={error && profiles === ''}
/>

If you're just looking to update a specific profile in the profiles state based on whether the value of it's biosafetyLevelId property matches the current selection, here's setState call that might do what you're looking for:

setProfiles((prev) => (
  prev.map((profile) => profile.biosafetyLevelId === changeState ? {
    // update this profile with new data
  } : profile)
))
user_196292550
Related