How to integrate Material-ui Rating with react-hook-form?

[blatoo]

Hi all,

I use react and material-ui, I want to have a component from material-ui library. According the document , I did the following

<Controller
              as={Rating}
              name="rating"
              control={control}
              defaultValue={null}
            />

However, I got an warning:

index.js:1 Warning: Failed prop type: Invalid prop value of type string supplied to ForwardRef(Rating), expected number.

So, I guess, the Controller give a "string", but the <Rating> expect a number. How can I change the value type???

Here is the sandbox code: https://codesandbox.io/s/thirsty-dream-2ur5y?file=/src/App.tsx

Thanks very much for the help!

[bluebill1049]

use render

[blatoo]

Hi @bluebill1049 Thanks for the answer! I used the render, now everything works smoothly!

here is the code after correction! ^_^
https://codesandbox.io/s/thirsty-dream-2ur5y?file=/src/App.tsx

[bluebill1049]

sweet.

[franq14]

Hi @bluebill1049 Thanks for the answer! I used the render, now everything works smoothly!

here is the code after correction! ^_^ https://codesandbox.io/s/thirsty-dream-2ur5y?file=/src/App.tsx

Hi, your code doesn't work. It returns always 3.

[blatoo]

@franq14 Hi, you are right, I just changed the code, so it works.

<Controller
          name="rating"
          control={control}
          defaultValue={3}
          rules={{ required: true }}
          render={(props) => <Rating name="rating" onChange={props.onChange} />}
        />

However, it is very strange, in the render prop, I think, the following code should be the same, but it still get the warning of wrong type:

render = {(props) => <Rating {...props}>

@bluebill1049 can you take a look? What's wrong with it? Thanks very much!

Hier is the example code: the problme is on the line: 20-29

https://codesandbox.io/s/pensive-paper-8f54b?file=/src/App.tsx

[thiltunen]

For people who faced the same type issue: you should add a value prop to the Rating component like this:

render={(props) => <Rating name="rating" onChange={props.onChange} value={Number(props.value)} />}

[nonwiz]

For those who using the latest version of react-hook-form, this is the one I used:

const { control } = useForm();

  return <Controller control={control} name={"rating"} defaultValue={-1} render={({field: {onChange, value} })=> <Rating
      name={"rating"}
      onChange={onChange}
      value={Number(value)}
      icon={<ThumbUp fontSize={"inherit"}/>}
      emptyIcon={<ThumbUp style={{opacity: 0.55}} fontSize="inherit"/>}
  />
}/>