Set Dynamic Value in Select elements

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;

innovative23 pro commented 6 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 commented 6 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 6 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

---

import Select from "./Select";

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;