Topic: How can I pass Id and or Name attributes to the Form and related components?

garyld1962 pro asked 5 years ago


How can I pass Id, Name attributes to the Form and related components?

I have a Gatsby App and these attributes are needed to take advantage of the Netify environment.

In any event shouldn't you pass any extra attributes by default?

Gary


Anna Morawska staff answered 5 years ago


Ok, now I see the problem. Unfortunately, you, as a user can't add attributes to the MDBSelectInput component. But you can easily bypass it, by adding additional input of type "hidden". Try something like this:

import React, { Component } from "react";
import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption} from "mdbreact";

class SelectPage extends Component {
  state = {
    inputValue: ""
  }

  onChangeHandler = value => {
    this.setState({inputValue: value})
  }

  render() {
    return (
            <div>
    <input name="hello" id="inputId" type="hidden" value={this.state.value} />
    <MDBSelect getValue={this.onChangeHandler}>
      <MDBSelectInput selected="Choose your option"  />
      <MDBSelectOptions>
        <MDBSelectOption disabled>Choose your option</MDBSelectOption>
        <MDBSelectOption value="1">Option nr 1</MDBSelectOption>
        <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
        <MDBSelectOption value="3">Option nr 3</MDBSelectOption>
      </MDBSelectOptions>
    </MDBSelect>
    <label>Material Select</label>
  </div>
    );
  }
}

export default SelectPage;

Let me know if this resolves your problem.Best,Ania


garyld1962 pro answered 5 years ago


Sorry, my edit with code did not save. I am using the Select control like below. This is what I need - although I don't know where the onChange event for the select would go.

<Select>
        <SelectInput selected='Choose...' onChange={onChange} id={id} name={id} />
        <SelectOptions>
          <SelectOption disabled>Choose...</SelectOption>
          <SelectOption value='1'>Yes</SelectOption>
          <SelectOption value='2'>No</SelectOption>
          <SelectOption value='3'>Sometimes</SelectOption>
        </SelectOptions>
      </Select>

Anna Morawska staff commented 5 years ago

please use getValue prop instead of onChange. You can check out all avaliable props in the API Tab on the documentation page.


garyld1962 pro commented 5 years ago

Can you please tell me how to pass a "name" and "id" attribute to the pro "Select" component?


Anna Morawska staff answered 5 years ago


Hi there,

I don't know the whole story ( please be more specific and provide us with more details what you want to achieve) but in general, you can use MDBinputs as a regular input, you can add to it an id and name attributes.

For example:

<MDBInput label="Your name" icon="user" type="text" name="name1" id="123" data-additional="something"/>

If you check using your browser devTools what is rendered - you will see that even a custom data attribute is added to the input.

Best, Ania


Rys free commented 1 year ago

in id instead of hard coded value can we pass soft coded value such as index then how can we get the id value



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: ALL
  • Browser: ALL
  • OS: ALL
  • Provided sample code: No
  • Provided link: No
Tags