how to get value of select field in react?

Question

I am using react-hook-form with material UI.On button click I want to get my autocomplete select box value. currently it is taking label as a value I need year should be a value

here is my code

https://codesandbox.io/s/react-hook-form-get-started-nt4kh

when I select { title: "The Godfather", year: 1972 }, the value should be 1972. currently on button click is shows The Godfather why ?

<Autocomplete
        options={top100Films}
        getOptionLabel={option => option.title}
        renderInput={params => (
          <TextField
            {...params}
            inputRef={register}
            label={"Resolution Code"}
            variant="outlined"
            name={"resolutionCode"}
            fullWidth
          />
        )}

/>

getOptionLabel={option => option.title} here you use option.title as label so it shows "Godfather" in select box. You want to show year instead? — thanhdx
– thanhdx, Commented Feb 7, 2020 at 1:44
You can set the value of option using the value attribute. See - telerik.com/kendo-react-ui/components/dropdowns/autocomplete/…. — random
– random, Commented Feb 7, 2020 at 2:53

keikai · Accepted Answer · 2020-02-07 02:41:38Z

1

You can find the related API document here

// From
getOptionLabel={option => option.title}
// To
getOptionLabel={option => option.year.toString()}

Update:
option displayed and value selected using different attributes

renderOption={params => (
  <Typography gutterBottom variant="subtitle1" component="h2">
    {params.title}
  </Typography>
)}
getOptionLabel={option => option.year.toString()}

getOptionLabel

Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided).

renderOption

function(option: T, state: object) => ReactNode option: The option to render. state: The state of the component.

Addition:
Since the question is like something below

when I select { title: "The Godfather", year: 1972 }, the value should be 1972. currently on button click is shows The Godfather why ?

I guess the above answer is handling that demand.

If you simply want the value for your console, just find it from your data since the select option should not be duplicated.

  const onSubmit = data => {
    const temp = top100Films.find(x => x.title === data.resolutionCode);
    const value = temp ? temp.year.toString() : "";
    console.log(value);
  };

edited Feb 7, 2020 at 2:41

answered Feb 7, 2020 at 1:54

keikai

15.3k10 gold badges56 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

thanhdx Over a year ago

How to get the year as value but still show title in the select box

user944513 Over a year ago

we are doing something wrong ...!! after select "on disable it should show godfather" but value will be 1972

user944513 Over a year ago

this solution doesn't works...!! :( after select it it shows 1972 in select box

keikai Over a year ago

I don't really sure about what you want to do.

user944513 Over a year ago

@keikai wait I will explain more ..actually I want to show title to the users .but whenever they selected any title it's year will be the value

|

Collectives™ on Stack Overflow

how to get value of select field in react?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related