Set Dynamic Value in Select elements

Topic: Set Dynamic Value in Select elements

Erupendra free asked 5 years ago

Hi, I am using mdb react pro in my project. I want to set value in Select Element dynamically. For Example : <Select getValue={this.getValueOfSelect} color="primary" value={this.state.countrycode } name="countrycode"> <SelectInput selected="Choose your option"></SelectInput> <SelectOptions> <SelectOption value="1">USA</SelectOption> <SelectOption value="2">Canada</SelectOption> <SelectOption value="3">UK</SelectOption> <SelectOption value="4">India</SelectOption> <SelectOption value="5">Japan</SelectOption> </SelectOptions> </Select> if I will use this this.seState({countrycode:"4"}); result would be India select in dropdown. its not working. please help me.

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

<p>Hi there,</p><p>please try to fetch your data from API in componentDidMount lifecycle method, and then call setState and pass your data. You have to make sure, that the data you are passing, has a proper structure.</p><p>It should look something like this. </p><div><pre class="code-toolbar grey lighten-2 p-3 mb-3">import React, { Component } from "react";<br />import { MDBSelect } from "mdbreact";<br /><br />class SelectPage extends Component {<br /><br />state = {};<br /><br />componentDidMount= () => {<br />const dataFromAPI = [<br /> { checked: false,<br />   disabled: false,<br />   icon: null,<br />   value: "Option 1"<br />  },<br />  {<br />   checked: false,<br />   disabled: false,<br />   icon: null,<br />   value: "Option 2"<br />  },<br />  {<br />   checked: false,<br />   disabled: false,<br />   icon: null,<br />   value: "Option 3"<br /><br />   }<br /> ]<br /><br />this.setState({<br />  options: dataFromAPI<br /> })<br />}<br /><br />render() {<br />return (<br />  <div><br />    <MDBSelect multiple options={this.state.options} selected="Choose your option" /><br />    <label>Example label</label><br />  </div><br /> );<br />}<br />}<br /><br />export default SelectPage;</pre></div>

Please insert min. 20 characters.

Hi there,

please try to fetch your data from API in componentDidMount lifecycle method, and then call setState and pass your data. You have to make sure, that the data you are passing, has a proper structure.

It should look something like this.

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

class SelectPage extends Component {

state = {};

componentDidMount= () => {
const dataFromAPI = [
 { checked: false,
   disabled: false,
   icon: null,
   value: "Option 1"
  },
  {
   checked: false,
   disabled: false,
   icon: null,
   value: "Option 2"
  },
  {
   checked: false,
   disabled: false,
   icon: null,
   value: "Option 3"

   }
 ]

this.setState({
  options: dataFromAPI
 })
}

render() {
return (
  <div>
    <MDBSelect multiple options={this.state.options} selected="Choose your option" />
    <label>Example label</label>
  </div>
 );
}
}

export default SelectPage;

Add comment

Erupendra free answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

I want to set dynamic value as "options 2" when rendered. import React, { Component } from "react"; import { MDBSelect } from "mdbreact"; class SelectPage extends Component { state = { options: [ { checked: false, disabled: false, icon: null, value: "Option 1" }, { checked: false, disabled: false, icon: null, value: "Option 2" }, { checked: false, disabled: false, icon: null, value: "Option 3" } ] }; render() { return ( <div> <MDBSelect multiple options={this.state.options} selected="Choose your option" /> <label>Example label</label> </div> ); } } export default SelectPage;

Add comment

Erupendra free answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, Here is my code. I am getting response from API and set state to this state stepsdata. Now I want to set dynamic options (Ex: 3000) at the time of render without clicking on any button or any event fire. Dropdown is rendering without any issue. If I use selected in MDBSelectOption then always set last options of dropdown. Please help me. <MDBSelect color="primary"> <MDBSelectInput selected="Choose steps" /> <MDBSelectOptions> <MDBSelectOption disabled>Choose your option</MDBSelectOption> {this.state.stepsdata.map((item, key) => <MDBSelectOption value={item.steps}> {item.steps} </MDBSelectOption> )} </MDBSelectOptions> </MDBSelect> Thanks in advance.

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

Hi, it looks like there something wrong with your import statement. It's hard to tell what exactly because it depends on your folder structure, but your import statement should look like this ( without curly braces )

import Select from "./Select";

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

Hi there,

in the lastest release we expanded functionality of our select component, now you can use this like this:
<div>
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">import React, { Component } from "react";

import { MDBSelect, Button } from "mdbreact";

class Select extends Component {

state = {

options: [

{

checked: false,

disabled: false,

icon: null,

value: "USA"

{

checked: false,

disabled: false,

icon: null,

value: "Canada"

{

checked: false,

disabled: false,

icon: null,

value: "UK"

{

checked: false,

disabled: false,

icon: null,

value: "India"

{

checked: false,

disabled: false,

icon: null,

value: "Japan"

}

]

};

changeToIndia = () => {

this.setState(prevState => {

let prevOptions = [...prevState.options];

prevOptions[3].checked = true;

return { options: prevOptions };

});

};

render() {

return (

<div>

Change dynamically

</Button>

<MDBSelect

multiple

color="primary"

options={this.state.options}

selected="Choose your option"

</div>

);

}

export default Select;</pre>

</div>
<div>Best,</div>
</div>
<div>Ania</div>
<div></div>

Please insert min. 20 characters.

Hi there, in the lastest release we expanded functionality of our select component, now you can use this like this:

import React, { Component } from "react";

import { MDBSelect, Button } from "mdbreact";

class Select extends Component {

  state = {

    options: [

      {

        checked: false,

        disabled: false,

        icon: null,

        value: "USA"

      },

      {

        checked: false,

        disabled: false,

        icon: null,

        value: "Canada"

      },

      {

        checked: false,

        disabled: false,

        icon: null,

        value: "UK"

      },

      {

        checked: false,

        disabled: false,

        icon: null,

        value: "India"

      },

      {

        checked: false,

        disabled: false,

        icon: null,

        value: "Japan"

      }

    ]

  };

  changeToIndia = () => {

    this.setState(prevState => {

      let prevOptions = [...prevState.options];

      prevOptions[3].checked = true;

      return { options: prevOptions };

    });

  };

  render() {

    return (

      <div>

        <Button onClick={this.changeToIndia} size="sm">

          Change dynamically

        </Button>

        <MDBSelect

          multiple

          color="primary"

          options={this.state.options}

          selected="Choose your option"

        />

      </div>

    );

  }

}

export default Select;

Best,

Ania

innovative23 pro commented 5 years ago

@Anna Thank you for the example but whenever I use your Select components I receive this error ````Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.``` Recommending me to check my code and then pointing to the select component. This only happens when I use your MDBSelect components.

Raiczyk free commented 5 years ago

Hi @Anna Morawska, I've tried your solution and it works almost as expected. The problem I have right now is that while select options stays synchronized with state, when I change the state programatically, the selected input doesn't get updated. Check this video: https://youtu.be/Fq6mcCpFnyE

Best, Alejandro

Anna Morawska staff commented 5 years ago

Hi Alejandro, could you open the new ticket on our support board and share there your code? It would be easier for me to find out how to fix the issue :) Best, Ania

Add comment

Write

Create snippet

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: Free
Premium support: No
Technology: MDB React
MDB Version: 4.7.1
Device: Laptop, iPad
Browser: chrome
OS: Ubuntu
Provided sample code: No
Provided link: No

Erupendra

42Support score
2Questions 3Answers 0Snippets