How to use data attributes with Material Design React?

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

Spring Spring · Accepted Answer · 2019-03-02T17:33:19

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

How to use data attributes with Material Design React?

1 Answers