CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-hook-form
user944513
user944513

Reputation: 12729

how to get value of select field in react?

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
          />
        )}

enter image description here />

Upvotes: 1

Views: 897

Answers (1)

keikai
keikai

Reputation: 15146

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.

Edit React Hook Form - Get Started

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);
  };

Upvotes: 1

Related Questions