Set React Material UI Checkbox data attribute

Question

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.

Ambroise Rabier · Accepted Answer · 2019-09-05 15:18:24Z

3

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

answered Sep 5, 2019 at 15:18

Ambroise Rabier

4,2225 gold badges33 silver badges41 bronze badges

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

Comments

Greg Smith · Accepted Answer · 2021-05-03 01:16:22Z

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

Collectives™ on Stack Overflow

Set React Material UI Checkbox data attribute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related