Material-UI-Search Bar value not clearing

Question

I am using the @material-ui-searchbar to filter data. I'm using the same container for multiple different pages to display the info. When ever I switch between pages (and thus the data) the whole container reloads to display the new data and new {subType}... however, despite me changing the value of {searched} using setSearched("")(verified that it does in fact change from the debugger), the old search value from the previous page/state remains in the search bar even though the search is inactive. Why won't the search bar value update with the change of state? Doesn't make intuitive sense. Here is the code for my container:

import SearchBar from 'material-ui-search-bar';


const facilityGridConfig = {
  hospitals: {
    columns: [
      { name: 'name', title: 'Name' },
      { name: 'address1', title: 'Address' },
      { name: 'city', title: 'City' },
      { name: 'state', title: 'State' },
      { name: 'zipcode', title: 'Zip' },
      { name: 'phoneNumber', title: 'Phone' },
      { name: 'userTotal', title: 'Therapists', link: '/users/therapists' },
      { name: 'endUserTotal', title: 'Patients', link: '/users/patients' },
    ]
  },
  clinics: {
    columns: [
      { name: 'name', title: 'Name' },
      { name: 'address1', title: 'Address' },
      { name: 'city', title: 'City' },
      { name: 'state', title: 'State' },
      { name: 'zipcode', title: 'Zip' },
      { name: 'phoneNumber', title: 'Phone' },
      { name: 'userTotal', title: 'Therapists', link: '/users/therapists' },
      { name: 'endUserTotal', title: 'Patients', link: '/users/patients' },
    ]
  },
  staff: {
    columns: [
      { name: 'firstName', title: 'First Name' },
      { name: 'lastName', title: 'Last Name' },
      { name: 'facility', title: 'Facility' },
      { name: 'logins', title: 'Logins', width: 90 },
      { name: 'enrollmentStatus', title: 'Status', width: 90 },
      { name: 'email', title: 'Email' },
      { name: 'phoneNumber', title: 'Phone' }
    ]
  },
  therapists: {
    columns: [
      { name: 'firstName', title: 'First Name' },
      { name: 'lastName', title: 'Last Name' },
      { name: 'facility', title: 'Facility' },
      { name: 'logins', title: 'Logins', width: 90 },
      { name: 'enrollmentStatus', title: 'Status', width: 90 },
      { name: 'email', title: 'Email' },
      { name: 'phoneNumber', title: 'Phone' },
      { name: 'endUserTotal', title: 'Patients' },
    ]
  },
  patients: {

    columns: [
      { name: 'firstName', title: 'First Name' },
      { name: 'lastName', title: 'Last Name' },
      { name: 'facility', title: 'Facility' },
      { name: 'email', title: 'Email' },
      { name: "sessionsInPastWeek", title: "Sessions Last 7 Days"},
    ]
  }
};

const facilityGridConfigSmall = {
  hospitals: {
    columns: [
      { name: 'name', title: 'Name' },
      { name: 'userTotal', title: 'Therapists', link: '/users/therapists' },
      { name: 'endUserTotal', title: 'Patients', link: '/users/patients' },
    ]
  },
  clinics: {
    columns: [
      { name: 'name', title: 'Name' },
      { name: 'userTotal', title: 'Therapists', link: '/users/therapists' },
      { name: 'endUserTotal', title: 'Patients', link: '/users/patients' },
    ]
  },
  staff: {
    columns: [
      { name: 'firstName', title: 'First Name' },
      { name: 'lastName', title: 'Last Name' },
      { name: 'logins', title: 'Logins' }
    ]
  },
  therapists: {
    columns: [
      { name: 'firstName', title: 'First Name' },
      { name: 'lastName', title: 'Last Name' },
      { name: 'logins', title: 'Logins' },
      { name: 'endUserTotal', title: 'Patients' },
    ]
  },
  patients: {

    columns: [
      { name: 'firstName', title: 'First Name' },
      { name: 'lastName', title: 'Last Name' },
      { name: "sessionsInPastWeek", title: "Sessions Last 7 Days"},
    ]
  }
};

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    position: 'relative',
    paddingTop: theme.spacing(2),
    paddingBottom: theme.spacing(2),
    height: '100%',
  },
  container: {
    position: 'relative',
    height: '100%',
  },
  breadcrumb: {
    fontFamily: "Open Sans",
    height: '28px',
  },
  content: {
    position: 'relative',
    height: 'calc(100% - 28px)',
  },
  gridHeaderEdit: {
    textAlign: 'center!important' as any,
  },
  menuIcon: {
    marginRight: theme.spacing(1)
  },

}));

const FacilitiesGridContainer = (props: any) => {
  const {
    type,
    subType,
    uid,
  } = props;

  const mountedRef = useRef(true);
  const classes = useStyles();
  const dispatch = useDispatch();
  const targetType = uid ? (
      subType === Navigations.facilities.hospitals ? Navigations.facilities.clinics :
      subType === Navigations.facilities.clinics ? Navigations.users.therapists : Navigations.users.patients
    ) : subType

  const userProfile = useSelector(state => _get(state, ['user', 'profile']) || {}, shallowEqual);
  const activeHospital = useSelector(state => _get(state, ['facilities', 'activeHospital']) || null, shallowEqual);
  const activeClinic = useSelector(state => _get(state, ['facilities', 'activeClinic']) || null, shallowEqual);
  const data = useSelector(state => _get(state, ['facilities', targetType]) || [], shallowEqual);
  const loading = useSelector(state => _get(state, ['facilities', 'loading']) || false, shallowEqual);

  const [fdata, setfData] = useState(data.data);
  
  const [ openDeleteModal, setopenDeleteModal ] = useState(false);
  const [ openInviteModal, setOpenInviteModal ] = useState(false);
  const [ facilitiesInEdit, setFacilitiesInEdit ] = useState([] as any);
  const [ sort, setSort ] = useState([] as any); //[{ field: 'name', dir: 'asc' }]
  const [ visibleAddButton, setVisibleAddButton ] = useState(true);
  const [ singleSubType, setSingleSubType ] = useState('');
  const [ windowTitle, setWindowTitle ] = useState('');
  const [ modalUserName, setModalUserName ] = useState('');

  const [ visibleQRModal, setVisibleQRModal ] = useState(true);
  const [ openQRModal, setOpenQRModal ] = useState(false);
  const [ qrString, setQRString ] = useState('');
  const [ qrFullName, setQRfullName ] = useState('');

  const gridConfig = _get(facilityGridConfig, [targetType]) || {};
  const gridConfigSmall = _get(facilityGridConfigSmall, [targetType]) || {};

  const [searched, setSearched] = useState("");

  const requestSearch = (searchedVal: string) => {
    const filteredData = data.data.filter((row:any) => {
      if (subType === "therapists" || subType === "patients" || subType === "staff"){
      return (row['firstName'].toLowerCase().includes(searchedVal.toLowerCase()) || row['lastName'].toLowerCase().includes(searchedVal.toLowerCase()));
      }
      else {
        return (row['name'].toLowerCase().includes(searchedVal.toLowerCase()));
      }
    });
    setfData(filteredData);
  };

  const cancelSearch = () => {
    setSearched("");
    requestSearch(searched);
  };


  useEffect(() => {
    setSearched("");
    return () => {
      mountedRef.current = false;
    }
  }, []);

  useEffect(() => {setfData(data.data)}, [data.data] )

  useEffect(() => {
    setSearched("");
    if (subType === Navigations.facilities.hospitals) {
      if (uid) {
        setSingleSubType('clinic');
      } else {
        setSingleSubType('hospital');
      }
      
    }
    else if (subType === Navigations.facilities.clinics) {
      if (uid) {
        setSingleSubType('therapist');
      } else {
        setSingleSubType('clinic');
      }
    }
    else if (subType === Navigations.users.therapists) {
      if (uid) {
        setSingleSubType('patient');
      } else {
        setSingleSubType('therapist');
      }
    } 
    else if (subType === Navigations.users.staff) {
      setSingleSubType('staff');
    }
    else
      setSingleSubType('patient');

    return () => {
    }
  }, [subType, uid]);


  useEffect(() => {
    console.log('call to api here...')
    dispatch({
      type: FacilityActionType.GetFacilities,
      payload: {
        type: type,
        subType: subType,
        targetType: targetType,
        facilityUid: targetType === 'therapists' ? (uid || null) : (_get(activeClinic, 'uid') || null),
        parentFacilityUid: uid ? null : (_get(activeHospital, 'uid') || null),
        parentUid: uid || null,
        skip: 0,
        take: 0
      }
    });
    
    if (!userProfile)
      setVisibleAddButton(false);
    if (subType === 'hospitals') {
      
      if ([UserRoles.SYSTEMADMIN].indexOf(userProfile.role) >= 0 && !!uid) {
        setVisibleAddButton(true);
      } else if ([UserRoles.SUPERUSER].indexOf(userProfile.role) < 0) {
        setVisibleAddButton(false);
      } else {
        setVisibleAddButton(true);
      }
    }
    else if (subType === 'clinics') {
      if ([UserRoles.FACILITYADMIN].indexOf(userProfile.role) >= 0 && !!uid) {
        setVisibleAddButton(true);
      } else if ([UserRoles.SUPERUSER, UserRoles.SYSTEMADMIN, UserRoles.FACILITYADMIN].indexOf(userProfile.role) < 0) {
        setVisibleAddButton(false);
      } else {
        setVisibleAddButton(true);
      }
    } else if (subType === 'therapists') {
      if ([UserRoles.SUPERUSER, UserRoles.SYSTEMADMIN, UserRoles.FACILITYADMIN].indexOf(userProfile.role) < 0) {
        setVisibleAddButton(false);
      } else {
        setVisibleAddButton(true);
      }
    } else if (subType === 'patients') {
      if ([UserRoles.SUPERUSER, UserRoles.SYSTEMADMIN, UserRoles.FACILITYADMIN, UserRoles.USER].indexOf(userProfile.role) < 0) {
        setVisibleAddButton(false);
      } else {
        setVisibleAddButton(true);
      }
    }

    setWindowTitle("Augment Therapy: "+subType.charAt(0).toUpperCase() + subType.slice(1));
    setSearched("");
    return () => {
    };
  }, [userProfile, subType, uid, dispatch, type, targetType, activeClinic, activeHospital])

  useEffect(() => {
    setSearched("");
    if (data) {
      if (subType === Navigations.users.therapists) {
        for (let rec of data.data) {
          if (!rec['enrollmentStatus']) {
            rec.enrollmentStatus = '--'
          }
        }
      }
    }
  }, [subType,data]);


  const setActiveFacility = (dataItem: any) => {
    const payload: any = getActiveFacilityPayload(subType, uid);

    if (dataItem.facilityType === FacilityType.Hospital) {
      payload.activeHospital = dataItem;
    } else if (dataItem.facilityType === FacilityType.Clinic) {
      payload.activeClinic = dataItem;
    } else if (subType === 'clinics' && !!uid) {
      payload.activeTherapist = dataItem;
    } else if (subType === 'staff' && !uid) {
      payload.activeStaff = dataItem;
    } else if (subType === 'therapists' && !uid) {
      payload.activeTherapist = dataItem;
    } else {
      payload.activePatient = dataItem;
    }
    dispatch({type: FacilityActionType.SetActiveFacility, payload: payload});
  }

  const handleRowClick = (e: any) => {
    setActiveFacility(e.dataItem);
    if (e.dataItem) {
      if (e.dataItem.facilityType === FacilityType.Hospital) {
        navigate(`${Navigations.facilities.root}/${Navigations.facilities.hospitals}/${e.dataItem.uid}`, false);
      } else if (e.dataItem.facilityType === FacilityType.Clinic) {
        navigate(`${Navigations.facilities.root}/${Navigations.facilities.clinics}/${e.dataItem.uid}`, false);
      } else if (subType === 'clinics') {
        if (!uid) {
          navigate(`${Navigations.facilities.root}/${Navigations.facilities.clinics}/${_get(e.dataItem, 'uid')}`, false);
        } else { // it's therapist
          navigate(`${Navigations.users.root}/${Navigations.users.therapists}/${_get(e.dataItem, 'uid')}`, false);
        }
      } else if (subType === 'therapists') {
        if (!uid) {
          navigate(`${Navigations.users.root}/${Navigations.users.therapists}/${_get(e.dataItem, 'uid')}`, false);
        } else { // it's therapist
          navigate(`${Navigations.users.root}/${Navigations.users.patients}/${_get(e.dataItem, 'uid')}`, false);
        }
      } else if (subType === 'patients') {
        navigate(`${Navigations.users.root}/${Navigations.users.patients}/${_get(e.dataItem, 'uid')}`, false);
      }
    }
  }

  const handleLink = (dataItem: any, fieldName: string) => {
    setActiveFacility(dataItem);
    if (fieldName === 'userTotal') {
      navigate(`${Navigations.users.root}/${Navigations.users.therapists}`, false);
    } else if (fieldName === 'endUserTotal') {
      navigate(`${Navigations.users.root}/${Navigations.users.patients}`, false);
    }
  }

  const handleEdit = (dataItem: any) => {
    let newType = Navigations.facilities.root;

    if (targetType === Navigations.users.staff || targetType === Navigations.users.therapists || targetType === Navigations.users.patients) {
      newType = Navigations.users.root;
    }

    if (dataItem) {
      setActiveFacility(dataItem);
      navigate(`${newType}/${targetType}/edit`, false, {uid: dataItem.uid});
    } else {
      navigate(`${newType}/${targetType}/new`);
    }
  }

  const handleDelete = (dataItem: any) => {
    setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
    setModalName(dataItem);
    setopenDeleteModal(true);
  }

  const handleDeleteOk = () => {
    dispatch({
      type: FacilityActionType.DeleteFacilities,
      payload: {
        type: type,
        subType: subType,
        targetType: targetType,
        body: facilitiesInEdit
      }});
    setopenDeleteModal(false);
  }

  const handleDeleteCancel = () => {
    setFacilitiesInEdit([]);
    setopenDeleteModal(false);
  };

  const handleInvite = (dataItem: any) => {
    //setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
    setFacilitiesInEdit([dataItem]);
    setModalName(dataItem);
    setOpenInviteModal(true);
  };

  const handleInviteOk = () => {
    dispatch({
      type: FacilityActionType.PostUserSendInvite,
      payload: {
        body: facilitiesInEdit,
      },
    });
    setOpenInviteModal(false);
  };

  const handleInviteCancel = () => {
    setFacilitiesInEdit([]);
    setOpenInviteModal(false);
  };

  const setModalName = (dataItem: any) => {
    if (dataItem.firstName) {
      setModalUserName(dataItem.firstName+' '+dataItem.lastName);
    } else {
      setModalUserName(dataItem.name);
    }

    return () => {
    }
  }

  const closeQR = () => {
    setOpenQRModal( false );
  };

  const handleQR = (dataItem: any) => {
    setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
    setQRString(dataItem.qr);
    if (dataItem.lastName) {
      setQRfullName( dataItem.firstName + ' ' + dataItem.lastName.charAt(0) + '.' );
    } else {
      setQRfullName( dataItem.firstName );
    }
    
    setOpenQRModal(true);
  };

  return (
    <Page
      className={classes.root}
      title={windowTitle}
    >
      <Container
        maxWidth={false}
        className={classes.container}
        >
        <Grid
          container
          direction='row'
          style={{height: '100%'}}
        >
          <Grid
            item
            xs={12}
            className={classes.breadcrumb}
          >
            <FacilitiesBreadCrumb
              type={type}
              subType={subType}
            />
          </Grid>
          <Grid
            item
            xs={12}
            className={classes.content}
          >
            {
              loading && (
                <CircularIndeterminate/>
              )
            }
            
            <Grid item xs={12} >
              <StatsCards
                type={subType}
                uid={uid}
              />
            </Grid>
                        

            <Hidden mdDown>

              <DataGrid
                style={{ height: '100%', overflow: 'auto', cursor:'pointer' }}
                data={orderBy(fdata, sort)}
                sortable={{
                  mode: 'multiple',
                }}
                sort={sort}
                onSortChange={(e) => {
                  setSort(e.sort);
                }}
                onRowClick={(e: any) => handleRowClick(e)}
              >
                {
                  (visibleAddButton) && (
                    <GridToolbar>
                     <Grid container
                  style={{justifyContent: 'center', display: 'flex', alignItems: 'center', padding: 10}}>
                    <Grid item>
                    <SearchBar 
                      value={searched}
                      onChange={(searchVal) => requestSearch(searchVal)}
                      onCancelSearch={() => cancelSearch()}
                      style={{
                        display: 'flex',
                        margin: '0 auto',
                        maxWidth: 800, 
                        minWidth: 800,
                        paddingRight: 10
                      }}>
                      </SearchBar>
                      </Grid>
                    <Grid item>
                    <button 
                      title="Add new"
                      className="k-button k-primary"
                      onClick={() => handleEdit(null)}
                      style={{
                        height: 50,
                        paddingLeft: 10
                      }}
                    >
                      Add New {singleSubType}
                    </button>
                    </Grid>
                  </Grid>
                    </GridToolbar>
                  )
                }

                { 
                  (!(targetType==='hospitals' || targetType==='clinics')) && (
                    <GridColumn
                      title="Badge"
                      width="100"
                      headerClassName={classes.gridHeaderEdit}
                      cell={CellWithQR({userProfile: userProfile,  type:"badge", handleAction: handleQR})}
                    />
                  )
                }
                { 
                  ((targetType==='hospitals' || targetType==='clinics')) && (
                    <GridColumn
                    title=""
                    width="1"
                    headerClassName={classes.gridHeaderEdit}
                    cell={CellWithEdit({userProfile: userProfile, type:"empty", handleAction: handleInvite})}
                  />
                  )
                }

                {
                  gridConfig.columns.map((c: any, index: number) => {
                    return (
                      <GridColumn key={`grid-${index}`}
                        field={c.name}
                        title={c.title}
                        cell={c.link ? CellWithLink({handleLink}) : undefined}
                        width= {c.width ? c.width : undefined}
                        />
                    )
                  })
                }
              
              <GridColumn
                  title="Actions"
                  width="100"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithComboMenu({userProfile: userProfile,  type:"edit", handleActionInvite: handleInvite, handleActionEdit: handleEdit, handleActionDelete: handleDelete})}
                />

              </DataGrid>
            </Hidden>

            <Hidden lgUp>
            
              <DataGrid
                style={{ height: '100%', overflow: 'auto', cursor:'pointer' }}
                data={orderBy(fdata, sort)}
                sortable={{
                  mode: 'multiple',
                }}
                sort={sort}
                onSortChange={(e) => {
                  setSort(e.sort);
                }}
                onRowClick={(e: any) => handleRowClick(e)}
              >
                {
                  (visibleAddButton) && (
                    <GridToolbar>
                      <Grid container
                  style={{justifyContent: 'center', display: 'flex', alignItems: 'center', padding: 10}}>
                    <Grid item>
                    <SearchBar 
                      value={searched}
                      onChange={(searchVal) => requestSearch(searchVal)}
                      onCancelSearch={() => cancelSearch()}
                      style={{
                        display: 'flex',
                        margin: '0 auto',
                        maxWidth: 800, 
                        paddingRight: 10
                      }}>
                      </SearchBar>
                      </Grid>
                    <Grid item>
                    <button 
                      title="Add new"
                      className="k-button k-primary"
                      onClick={() => handleEdit(null)}
                      style={{
                        height: 50,
                        paddingLeft: 10
                      }}
                    >
                      Add New {singleSubType}
                    </button>
                    </Grid>
                  </Grid>
                    </GridToolbar>
                  )
                }

                { 
                  (!(targetType==='hospitals' || targetType==='clinics')) && (
                    <GridColumn
                      title="Badge"
                      width="20"
                      headerClassName={classes.gridHeaderEdit}
                      cell={CellWithQR({userProfile: userProfile,  type:"badge", handleAction: handleQR})}
                    />
                  )
                }
                { 
                  ((targetType==='hospitals' || targetType==='clinics')) && (
                    <GridColumn
                    title=""
                    width="10"
                    headerClassName={classes.gridHeaderEdit}
                    cell={CellWithEdit({userProfile: userProfile, type:"empty", handleAction: handleInvite})}
                  />
                  )
                }

                {
                  gridConfigSmall.columns.map((c: any, index: number) => {
                    return (
                      <GridColumn key={`grid-${index}`}
                        field={c.name}
                        title={c.title}
                        cell={c.link ? CellWithLink({handleLink}) : undefined}
                        minResizableWidth = {c.name.toLowerCase().includes("name")? 20 : 10}
                        />
                    )
                  })
                }

                <GridColumn
                  title="Actions"
                  width="100"
                  headerClassName={classes.gridHeaderEdit}
                  cell={CellWithComboMenu({userProfile: userProfile,  type:"edit", handleActionInvite: handleInvite, handleActionEdit: handleEdit, handleActionDelete: handleDelete})}
                />

              </DataGrid>
            </Hidden>

            <ConfirmModal
              title="Confirm Deletion"
              content={`Are you sure you want to delete the ${singleSubType} ( ${modalUserName} ) ?`}
              open={openDeleteModal}
              handleClose={handleDeleteCancel}
              handleOk={handleDeleteOk}
              handleCancel={handleDeleteCancel}
            />

            <ConfirmModal
              title="Confirm Invite"
              content={`Send ${modalUserName} an invitation to connect?`}
              open={openInviteModal}
              handleClose={handleInviteCancel}
              handleOk={handleInviteOk}
              handleCancel={handleInviteCancel}
            />

            { 
              (openQRModal) && (
                <UserQRCode
                  id="qrCode"
                  qrCodeString={qrString}
                  size={256}
                  userfullname={qrFullName}
                  open={true}
                  handleClose={closeQR}
                />
              )
            }
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}

export default FacilitiesGridContainer;```

Answer 1

Well, I'm new to reactjs, but I suggest to call setSearched in a useEffect hook if your filteredData get changed. So it'll be something like this :

 useEffect(() => {
      setSearched("");
    }, [filteredData])

..despite me changing the value of {searched} using setSearched("")..

this because you call setSearched("") on compoenent mount using (useEffect) but you need this to be called every time your filteredData get updated