React: TextField onchange

Question

I have a list of data that lists on the collapse, I just want to display in my collapse what i put on my Textfield

const onChangeLocation = (locations) =>{
    console.log(locations)
  }

   <TextField
      size="small"
      fullWidth
      onChange={onChangeLocation}
      variant="standard"
      placeholder="Search Locations"
      onFocus={openSearch}
      value={searchParameter}
      }}
    />

  <Collapse in={viewLocationList} sx={{ my: '2px' }}>
    <Box className="rounded-scrollbar widget-result-container">
      {locations.map((location, index) => (
        <LocationWidgetItem
          key={index}
          location={location}
          onClickLocation={setActiveLocation}
        />
      ))}
    </Box>
  </Collapse>

Answer 1

Are you using the state to store the location you are getting from textfield? If not please use the state to store the input you get from textfield into a state like this -

const [location, setLocation] = useState('')

const onChangeLocation = (event) => {
 setLocation(event.target.value)
}

<TextField
  size="small"
  fullWidth
  onChange={onChangeLocation}
  variant="standard"
  placeholder="Search Locations"
  onFocus={openSearch}
  value={searchParameter}
  }}
 />

  <Collapse in={viewLocationList} sx={{ my: '2px' }}>
    <Box className="rounded-scrollbar widget-result-container">
      {locations.map((location, index) => (
        <LocationWidgetItem
          key={index}
          location={location}
          onClickLocation={setActiveLocation}
        />
      ))}
    </Box>
  </Collapse>

If you are using the state to store the location then too you can use the code above. Your code was not working because you are not sending the param from your textfield and the function onChangeLocation is expecting an argument which it isn't getting so it should be returning undefined.