score:2

Accepted answer

here is the whole solve. there was an error in the filterresults function.

import {usestate} from 'react'
import textfield from "@mui/material/textfield";
import iconbutton from "@mui/material/iconbutton";
import clearicon from '@mui/icons-material/clearoutlined'

export default function app() {
  const [filteredlocations, setfilteredlocations] = usestate('');

const clearsearch = () => {
    setfilteredlocations('')
  };
  const filterresults = (e) => {
    setfilteredlocations(e.target.value);
  };

    
  return (
    <div classname="app">
      <textfield
      placeholder="search locations"
      value={filteredlocations}
      onchange={filterresults}
      inputprops={{
        endadornment: (
          <iconbutton onclick={clearsearch} edge="end">
            <clearicon />
          </iconbutton>
        )
      }}
    />
    </div>
  );
}

codesnadbox link - https://codesandbox.io/s/how-to-clear-textfield-in-react-tb73t

score:2 

const [filteredlocations, setfilteredlocations] = usestate(locations);

const clearsearch = () => {
  setfilteredlocations("");
  };
  const filterresults = (e) => {
    ....
    setfilteredlocations(filteredlocations);
  };

    <textfield
      value = {filteredlocations}
      placeholder="search locations"
      onchange={filterresults}
      inputprops={{
        endadornment: (
          <iconbutton onclick={clearsearch} edge="end">
            <clearicon />
          </iconbutton>
        )
      }}
    />

user a state to keep the text. and use that value as textare value. change that state to empty inside clearsearch function.


Related Query

More Query from same tag