user image

Jo Micheal
Published in : 2021-12-22

How to get the selected object in "Autocomplete material ui"?

React js

How to get the selected value & object in the autocomplete component in Reactjs Material UI? I can get the value but I need to get the entire option object because there are some options I add to each option, I am using this way to get the selected value when the user click on the option 

<Autocomplete
    filterOptions={filterOptions}
    options={this.state.dropdown}
    groupBy={(option) => option.type}
    getOptionLabel={(option) => option.name || ''}
    renderOption={(option) => (
        <React.Fragment>
            {option.name}
        </React.Fragment>                                  
    )}
    // closeIcon= { () => { return; } }
    renderInput={(params) => (
        <TextField {...params} placeholder="What are you looking for?" value={values.search} label="" name="search" />
    )}
    onInputChange={(e, value) => { setFieldValue('search', value); }}
/>

I am using onInputChange but it gets the final label of the option, 

like when i click on Wheels, i get wheel but the object of the option should look like 

{
    type: 'Cars',
    parentCat: 32,
    rule: 'subcategory',
    name: 'Wheels'
}

so How can I get this option?

Comments

Mohamed Atef Date : 2021-12-22

Best answers

46

Best answers

46

Hi Jo, you can get the object using onChange 

onChange={ (e, obj) => { console.log(obj); setFieldValue('search', obj); } }

that's how it suppose to work,
here is the full code 

<Autocomplete
    filterOptions={filterOptions}
    options={this.state.dropdown}
    groupBy={(option) => option.type}
    getOptionLabel={(option) => option.name || ''}
    renderOption={(option) => (
        <React.Fragment>
            {option.name}
        </React.Fragment>                                  
    )}
    // closeIcon= { () => { return; } }
    renderInput={(params) => (
        <TextField {...params} placeholder="What are you looking for?" value={values.search} label="" name="search" />
    )}
    // onInputChange={(e, value) => { setFieldValue('search', value); }}
    onChange={ (e, obj) => { console.log(obj); setFieldValue('search', obj); } }
/>

Good luck

Jo Micheal Date : 2021-12-22

Thanks this works for me, i tried to use getOptionSelected but i realized that it's being used to select a specific option in the list on change not to get the selected option

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

[solved] Render/Show a custom option in Autocomplete Material UI?
Publish date: 2021-12-22 | Comments: 2

Tag: React js

Unexpected mix of '&&' and '||' Reactjs
Publish date: 2021-10-30 | Comments: 0

Tag: React js

React Component displaying a list of lines
Publish date: 2022-03-19 | Comments: 3

Tag: React js

[solved] Expected a conditional expression and instead saw an assignment
Publish date: 2021-11-29 | Comments: 0

Tag: React js

Could not be processed as an image because it has an invalid content type
Publish date: 2021-12-08 | Comments: 0

Tag: React js

useStyles Invalid hook call class component
Publish date: 2022-02-10 | Comments: 2

Tag: React js