How to use data attributes with Material UI?

Question

I recently started using Material Design React, but I have just come across that data-someField does propagate the value to the dataset map.

Example:

<Input data-role=‘someValue’  onChange={this.onChange} />

onChange = e =>{
           const role = e.target.dataset.role
            const role2 = e.currentTarget.dataset.role
}

Both roles in the onChange handler are undefined. This doesn’t happen if I change the Input tag to a regular html input.

Any ideas why Material Design doesn’t allow data attributes or if there is any workarounds?

Thank you in advance!

--- After @Springer suggestion, I tried using the inputprops, but noticed that only the name attribute is available, the rest are undefined.

```  <Input
                    value={role.name}
                    disabled={!this.state.editMode}
                    inputProps={{
                      name: 'MyName',
                      role: 'MyRole',

                      dataset: {
                        degree: 'Teniente'
                      },

                      data: {
                        roleId: role.uuid
                      },
                      dataRoleId: {
                        roleId: role.uuid
                      }
                    }}
                    disableUnderline={true}
                    data-role-id={role.uuid}
                    role={role}
                    onChange={this.onChangeExistingRole}
                  /> ```

The reason why none of the fields, but name were working was because they are custom attributes, so you have to put quotes around them: ```inputProps={{'data-role':'MyRole'}}```. Then you will be able to access them in the handler as follows: ```e.target.dataset.role``` — Antuan, Mar 02 '19 at 18:06

Bourbia Brahim · Accepted Answer · 2022-07-22T13:46:41.927

26

In the react material api they use the inputProps to pass extrat object (props , data..)

see doc

inputProps : Attributes applied to the input element.

by example to add role data attribute you should add to your inputProps props the data-role options ( 'data-role':'roleAttrib' ), the input should looks like :

<Input   value={role.name}
         disabled={!this.state.editMode}
         inputProps={{
            name: 'MyName',
            'data-role':'role' // <------- add data attribute like this
            ... 
         }} />

same thing for other component Except <Button> you add the data attribute directly in component like

<Button  data-your-attrib="value" />

edited Jul 22 '22 at 13:46

answered Mar 02 '19 at 17:33

Bourbia Brahim

14,459
4
39
52

3

Hi @Springer, thank you for your answer. Would you be kind enough to give me an example on how you would access the values? I tried inputProps, but only the name attribute is available. I will edit the question to show, what I tried. Thank you – Antuan Mar 02 '19 at 17:59
Never mind, I figured it out. Thank you for pointing me in the right direction – Antuan Mar 02 '19 at 18:05
We need an example. – Jamie Hutber Jun 08 '20 at 08:22
@JamieHutber , the answer is already accepted , and seems clear ! , by the way I've added an example for other people for more understanding – Bourbia Brahim Jun 08 '20 at 10:00
4

How do you do this with – julio Sep 30 '20 at 09:35
How do you access the inputProps from an event fired from that Input? – mojave Dec 12 '20 at 18:12
@julio you just add the data attribute directly as mentioned in answer `` – Bourbia Brahim Jul 22 '22 at 13:47

How to use data attributes with Material UI?

1 Answers1

Linked