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>

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>

• javascript
• reactjs

Share Improve this question Follow asked Dec 27, 2021 at 6:48 RogerRoger 39311 gold badge44 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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={location}
  }}
 />

  <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.