title: Material-UI-Search Bar value not clearing
body: <p>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(&quot;&quot;)(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:</p>
  <pre><code>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: &quot;sessionsInPastWeek&quot;, title: &quot;Sessions Last 7 Days&quot;},
      ]
    }
  };
  
  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: &quot;sessionsInPastWeek&quot;, title: &quot;Sessions Last 7 Days&quot;},
      ]
    }
  };
  
  const useStyles = makeStyles((theme: Theme) =&gt; ({
    root: {
      position: 'relative',
      paddingTop: theme.spacing(2),
      paddingBottom: theme.spacing(2),
      height: '100%',
    },
    container: {
      position: 'relative',
      height: '100%',
    },
    breadcrumb: {
      fontFamily: &quot;Open Sans&quot;,
      height: '28px',
    },
    content: {
      position: 'relative',
      height: 'calc(100% - 28px)',
    },
    gridHeaderEdit: {
      textAlign: 'center!important' as any,
    },
    menuIcon: {
      marginRight: theme.spacing(1)
    },
  
  }));
  
  const FacilitiesGridContainer = (props: any) =&gt; {
    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 =&gt; _get(state, ['user', 'profile']) || {}, shallowEqual);
    const activeHospital = useSelector(state =&gt; _get(state, ['facilities', 'activeHospital']) || null, shallowEqual);
    const activeClinic = useSelector(state =&gt; _get(state, ['facilities', 'activeClinic']) || null, shallowEqual);
    const data = useSelector(state =&gt; _get(state, ['facilities', targetType]) || [], shallowEqual);
    const loading = useSelector(state =&gt; _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(&quot;&quot;);
  
    const requestSearch = (searchedVal: string) =&gt; {
      const filteredData = data.data.filter((row:any) =&gt; {
        if (subType === &quot;therapists&quot; || subType === &quot;patients&quot; || subType === &quot;staff&quot;){
        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 = () =&gt; {
      setSearched(&quot;&quot;);
      requestSearch(searched);
    };
  
  
    useEffect(() =&gt; {
      setSearched(&quot;&quot;);
      return () =&gt; {
        mountedRef.current = false;
      }
    }, []);
  
    useEffect(() =&gt; {setfData(data.data)}, [data.data] )
  
    useEffect(() =&gt; {
      setSearched(&quot;&quot;);
      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 () =&gt; {
      }
    }, [subType, uid]);
  
  
    useEffect(() =&gt; {
      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) &gt;= 0 &amp;&amp; !!uid) {
          setVisibleAddButton(true);
        } else if ([UserRoles.SUPERUSER].indexOf(userProfile.role) &lt; 0) {
          setVisibleAddButton(false);
        } else {
          setVisibleAddButton(true);
        }
      }
      else if (subType === 'clinics') {
        if ([UserRoles.FACILITYADMIN].indexOf(userProfile.role) &gt;= 0 &amp;&amp; !!uid) {
          setVisibleAddButton(true);
        } else if ([UserRoles.SUPERUSER, UserRoles.SYSTEMADMIN, UserRoles.FACILITYADMIN].indexOf(userProfile.role) &lt; 0) {
          setVisibleAddButton(false);
        } else {
          setVisibleAddButton(true);
        }
      } else if (subType === 'therapists') {
        if ([UserRoles.SUPERUSER, UserRoles.SYSTEMADMIN, UserRoles.FACILITYADMIN].indexOf(userProfile.role) &lt; 0) {
          setVisibleAddButton(false);
        } else {
          setVisibleAddButton(true);
        }
      } else if (subType === 'patients') {
        if ([UserRoles.SUPERUSER, UserRoles.SYSTEMADMIN, UserRoles.FACILITYADMIN, UserRoles.USER].indexOf(userProfile.role) &lt; 0) {
          setVisibleAddButton(false);
        } else {
          setVisibleAddButton(true);
        }
      }
  
      setWindowTitle(&quot;Augment Therapy: &quot;+subType.charAt(0).toUpperCase() + subType.slice(1));
      setSearched(&quot;&quot;);
      return () =&gt; {
      };
    }, [userProfile, subType, uid, dispatch, type, targetType, activeClinic, activeHospital])
  
    useEffect(() =&gt; {
      setSearched(&quot;&quot;);
      if (data) {
        if (subType === Navigations.users.therapists) {
          for (let rec of data.data) {
            if (!rec['enrollmentStatus']) {
              rec.enrollmentStatus = '--'
            }
          }
        }
      }
    }, [subType,data]);
  
  
    const setActiveFacility = (dataItem: any) =&gt; {
      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' &amp;&amp; !!uid) {
        payload.activeTherapist = dataItem;
      } else if (subType === 'staff' &amp;&amp; !uid) {
        payload.activeStaff = dataItem;
      } else if (subType === 'therapists' &amp;&amp; !uid) {
        payload.activeTherapist = dataItem;
      } else {
        payload.activePatient = dataItem;
      }
      dispatch({type: FacilityActionType.SetActiveFacility, payload: payload});
    }
  
    const handleRowClick = (e: any) =&gt; {
      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) =&gt; {
      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) =&gt; {
      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) =&gt; {
      setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
      setModalName(dataItem);
      setopenDeleteModal(true);
    }
  
    const handleDeleteOk = () =&gt; {
      dispatch({
        type: FacilityActionType.DeleteFacilities,
        payload: {
          type: type,
          subType: subType,
          targetType: targetType,
          body: facilitiesInEdit
        }});
      setopenDeleteModal(false);
    }
  
    const handleDeleteCancel = () =&gt; {
      setFacilitiesInEdit([]);
      setopenDeleteModal(false);
    };
  
    const handleInvite = (dataItem: any) =&gt; {
      //setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
      setFacilitiesInEdit([dataItem]);
      setModalName(dataItem);
      setOpenInviteModal(true);
    };
  
    const handleInviteOk = () =&gt; {
      dispatch({
        type: FacilityActionType.PostUserSendInvite,
        payload: {
          body: facilitiesInEdit,
        },
      });
      setOpenInviteModal(false);
    };
  
    const handleInviteCancel = () =&gt; {
      setFacilitiesInEdit([]);
      setOpenInviteModal(false);
    };
  
    const setModalName = (dataItem: any) =&gt; {
      if (dataItem.firstName) {
        setModalUserName(dataItem.firstName+' '+dataItem.lastName);
      } else {
        setModalUserName(dataItem.name);
      }
  
      return () =&gt; {
      }
    }
  
    const closeQR = () =&gt; {
      setOpenQRModal( false );
    };
  
    const handleQR = (dataItem: any) =&gt; {
      setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
      setQRString(dataItem.qr);
      if (dataItem.lastName) {
        setQRfullName( dataItem.firstName + ' ' + dataItem.lastName.charAt(0) + '.' );
      } else {
        setQRfullName( dataItem.firstName );
      }
      
      setOpenQRModal(true);
    };
  
    return (
      &lt;Page
        className={classes.root}
        title={windowTitle}
      &gt;
        &lt;Container
          maxWidth={false}
          className={classes.container}
          &gt;
          &lt;Grid
            container
            direction='row'
            style={{height: '100%'}}
          &gt;
            &lt;Grid
              item
              xs={12}
              className={classes.breadcrumb}
            &gt;
              &lt;FacilitiesBreadCrumb
                type={type}
                subType={subType}
              /&gt;
            &lt;/Grid&gt;
            &lt;Grid
              item
              xs={12}
              className={classes.content}
            &gt;
              {
                loading &amp;&amp; (
                  &lt;CircularIndeterminate/&gt;
                )
              }
              
              &lt;Grid item xs={12} &gt;
                &lt;StatsCards
                  type={subType}
                  uid={uid}
                /&gt;
              &lt;/Grid&gt;
                          
  
              &lt;Hidden mdDown&gt;
  
                &lt;DataGrid
                  style={{ height: '100%', overflow: 'auto', cursor:'pointer' }}
                  data={orderBy(fdata, sort)}
                  sortable={{
                    mode: 'multiple',
                  }}
                  sort={sort}
                  onSortChange={(e) =&gt; {
                    setSort(e.sort);
                  }}
                  onRowClick={(e: any) =&gt; handleRowClick(e)}
                &gt;
                  {
                    (visibleAddButton) &amp;&amp; (
                      &lt;GridToolbar&gt;
                       &lt;Grid container
                    style={{justifyContent: 'center', display: 'flex', alignItems: 'center', padding: 10}}&gt;
                      &lt;Grid item&gt;
                      &lt;SearchBar 
                        value={searched}
                        onChange={(searchVal) =&gt; requestSearch(searchVal)}
                        onCancelSearch={() =&gt; cancelSearch()}
                        style={{
                          display: 'flex',
                          margin: '0 auto',
                          maxWidth: 800, 
                          minWidth: 800,
                          paddingRight: 10
                        }}&gt;
                        &lt;/SearchBar&gt;
                        &lt;/Grid&gt;
                      &lt;Grid item&gt;
                      &lt;button 
                        title=&quot;Add new&quot;
                        className=&quot;k-button k-primary&quot;
                        onClick={() =&gt; handleEdit(null)}
                        style={{
                          height: 50,
                          paddingLeft: 10
                        }}
                      &gt;
                        Add New {singleSubType}
                      &lt;/button&gt;
                      &lt;/Grid&gt;
                    &lt;/Grid&gt;
                      &lt;/GridToolbar&gt;
                    )
                  }
  
                  { 
                    (!(targetType==='hospitals' || targetType==='clinics')) &amp;&amp; (
                      &lt;GridColumn
                        title=&quot;Badge&quot;
                        width=&quot;100&quot;
                        headerClassName={classes.gridHeaderEdit}
                        cell={CellWithQR({userProfile: userProfile,  type:&quot;badge&quot;, handleAction: handleQR})}
                      /&gt;
                    )
                  }
                  { 
                    ((targetType==='hospitals' || targetType==='clinics')) &amp;&amp; (
                      &lt;GridColumn
                      title=&quot;&quot;
                      width=&quot;1&quot;
                      headerClassName={classes.gridHeaderEdit}
                      cell={CellWithEdit({userProfile: userProfile, type:&quot;empty&quot;, handleAction: handleInvite})}
                    /&gt;
                    )
                  }
  
                  {
                    gridConfig.columns.map((c: any, index: number) =&gt; {
                      return (
                        &lt;GridColumn key={`grid-${index}`}
                          field={c.name}
                          title={c.title}
                          cell={c.link ? CellWithLink({handleLink}) : undefined}
                          width= {c.width ? c.width : undefined}
                          /&gt;
                      )
                    })
                  }
                
                &lt;GridColumn
                    title=&quot;Actions&quot;
                    width=&quot;100&quot;
                    headerClassName={classes.gridHeaderEdit}
                    cell={CellWithComboMenu({userProfile: userProfile,  type:&quot;edit&quot;, handleActionInvite: handleInvite, handleActionEdit: handleEdit, handleActionDelete: handleDelete})}
                  /&gt;
  
                &lt;/DataGrid&gt;
              &lt;/Hidden&gt;
  
              &lt;Hidden lgUp&gt;
              
                &lt;DataGrid
                  style={{ height: '100%', overflow: 'auto', cursor:'pointer' }}
                  data={orderBy(fdata, sort)}
                  sortable={{
                    mode: 'multiple',
                  }}
                  sort={sort}
                  onSortChange={(e) =&gt; {
                    setSort(e.sort);
                  }}
                  onRowClick={(e: any) =&gt; handleRowClick(e)}
                &gt;
                  {
                    (visibleAddButton) &amp;&amp; (
                      &lt;GridToolbar&gt;
                        &lt;Grid container
                    style={{justifyContent: 'center', display: 'flex', alignItems: 'center', padding: 10}}&gt;
                      &lt;Grid item&gt;
                      &lt;SearchBar 
                        value={searched}
                        onChange={(searchVal) =&gt; requestSearch(searchVal)}
                        onCancelSearch={() =&gt; cancelSearch()}
                        style={{
                          display: 'flex',
                          margin: '0 auto',
                          maxWidth: 800, 
                          paddingRight: 10
                        }}&gt;
                        &lt;/SearchBar&gt;
                        &lt;/Grid&gt;
                      &lt;Grid item&gt;
                      &lt;button 
                        title=&quot;Add new&quot;
                        className=&quot;k-button k-primary&quot;
                        onClick={() =&gt; handleEdit(null)}
                        style={{
                          height: 50,
                          paddingLeft: 10
                        }}
                      &gt;
                        Add New {singleSubType}
                      &lt;/button&gt;
                      &lt;/Grid&gt;
                    &lt;/Grid&gt;
                      &lt;/GridToolbar&gt;
                    )
                  }
  
                  { 
                    (!(targetType==='hospitals' || targetType==='clinics')) &amp;&amp; (
                      &lt;GridColumn
                        title=&quot;Badge&quot;
                        width=&quot;20&quot;
                        headerClassName={classes.gridHeaderEdit}
                        cell={CellWithQR({userProfile: userProfile,  type:&quot;badge&quot;, handleAction: handleQR})}
                      /&gt;
                    )
                  }
                  { 
                    ((targetType==='hospitals' || targetType==='clinics')) &amp;&amp; (
                      &lt;GridColumn
                      title=&quot;&quot;
                      width=&quot;10&quot;
                      headerClassName={classes.gridHeaderEdit}
                      cell={CellWithEdit({userProfile: userProfile, type:&quot;empty&quot;, handleAction: handleInvite})}
                    /&gt;
                    )
                  }
  
                  {
                    gridConfigSmall.columns.map((c: any, index: number) =&gt; {
                      return (
                        &lt;GridColumn key={`grid-${index}`}
                          field={c.name}
                          title={c.title}
                          cell={c.link ? CellWithLink({handleLink}) : undefined}
                          minResizableWidth = {c.name.toLowerCase().includes(&quot;name&quot;)? 20 : 10}
                          /&gt;
                      )
                    })
                  }
  
                  &lt;GridColumn
                    title=&quot;Actions&quot;
                    width=&quot;100&quot;
                    headerClassName={classes.gridHeaderEdit}
                    cell={CellWithComboMenu({userProfile: userProfile,  type:&quot;edit&quot;, handleActionInvite: handleInvite, handleActionEdit: handleEdit, handleActionDelete: handleDelete})}
                  /&gt;
  
                &lt;/DataGrid&gt;
              &lt;/Hidden&gt;
  
              &lt;ConfirmModal
                title=&quot;Confirm Deletion&quot;
                content={`Are you sure you want to delete the ${singleSubType} ( ${modalUserName} ) ?`}
                open={openDeleteModal}
                handleClose={handleDeleteCancel}
                handleOk={handleDeleteOk}
                handleCancel={handleDeleteCancel}
              /&gt;
  
              &lt;ConfirmModal
                title=&quot;Confirm Invite&quot;
                content={`Send ${modalUserName} an invitation to connect?`}
                open={openInviteModal}
                handleClose={handleInviteCancel}
                handleOk={handleInviteOk}
                handleCancel={handleInviteCancel}
              /&gt;
  
              { 
                (openQRModal) &amp;&amp; (
                  &lt;UserQRCode
                    id=&quot;qrCode&quot;
                    qrCodeString={qrString}
                    size={256}
                    userfullname={qrFullName}
                    open={true}
                    handleClose={closeQR}
                  /&gt;
                )
              }
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Container&gt;
      &lt;/Page&gt;
    );
  }
  
  export default FacilitiesGridContainer;```
  </code></pre>