CODEWITHSUNDEEP
reactjsmaterial-ui
Ambroise Rabier
Ambroise Rabier

Reputation: 4102

Set React Material UI Checkbox data attribute

This code is valid.

              <TextField name="email"
                         label="Your email"
                         inputProps={{
                           'data-cy': 'feedback-form-email',
                         }}
                         fullWidth
              />

This code is invalid, even with skipping type check by casting inputProps value as any, it does not work.

<Checkbox name="consent"
                            inputProps={{
                              'data-cy': 'feedback-form-consent',
                            }}
                            checked={this.state.model.sender_consent}
                            onChange={this.onChange('sender_consent')}/>

inputProps property refer to a different type when looking into Material UI source for Checkbox and TextField, but both have the same usage... and I expected them to work the same.

Checkbox doc: https://material-ui.com/api/checkbox/

PS: Unable to highligh the code with tsx, using html as fallback.

Upvotes: 1

Views: 2658

Answers (2)

Greg Smith
Greg Smith

Reputation: 1112

If you'd like to avoid using the any type, I found the following works for me:

type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  [key: string]: string | undefined
}

const MyComponent = () => {
  const inputProps: InputProps = { 'data-cy': 'feedback-form-consent' }

  return <Checkbox inputProps={inputProps} />
}

The beauty of this is that you still get type checking and autocomplete for all of the other inputProps.

To take it a step further, you can optimise this either by moving the declaration of the inputProps outside of the component if you don't need to consume any props being passed in:

type InputProps = InputHTMLAttributes<HTMLInputElement> & {
  [key: string]: string | undefined
}

const inputProps: InputProps = { 'data-cy': 'feedback-form-consent' }

const MyComponent = () => (
  <Checkbox inputProps={inputProps} />
)

Alternatively, if you do need to consume some props, you could use useMemo:

type MyComponentProps = {
  testId?: string
}

type InputProps = InputHTMLAttributes<HTMLInputElement> & {
  [key: string]: string | undefined
}

const MyComponent = ({ testId }: MyComponentProps) => {
  const inputProps: InputProps = React.useMemo({ 'data-cy': testId }, [testId])

  return <Checkbox inputProps={inputProps} />
}

Upvotes: 2

Ambroise Rabier
Ambroise Rabier

Reputation: 4102

Eh, correction, adding as any does work, the issue was somewhere else for me :/ :

That work:

                  <Checkbox name="consent"
                            inputProps={{
                              'data-cy': 'feedback-form-consent',
                            } as any}
                            checked={this.state.model.sender_consent}
                            onChange={this.onChange('sender_consent')}/>

Upvotes: 3

Related Questions