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