MDBSelect Creating Issue


Topic: MDBSelect Creating Issue

Nitin.Chanana asked 6 years ago

      <MDBSelect getValue={(value)=>this.handleChange("EventType",value)} options={this.state.eventtype} selected="Select Format"/>

This is my code getValue and getTextContent attribute is not working please provide any solution regarding this.. Thanks


Jakub Mandra staff premium answered 6 years ago

Hi,

I'm not sure what exactly you want to retrive from your select, but here is the example component with same function as yours:

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

class SelectPage extends Component {
  state = {
    eventtype: [
      {
        value: "event1",
        text: "example event 1"
      },
      {
        value: "event2",
        text: "example event 2"
      },
      {
        value: "event3",
        text: "example event 3"
      }
    ]
  };

  handleChange = (type, val) => {
    console.log(type, val)
  }

  render() {
    return (
      <div>
        <MDBSelect 
            getValue={(value)=>this.handleChange("EventType",value)} 
            options={this.state.eventtype} 
            selected="Select Format"
        />
        <label>Example label</label>
      </div>
    );
  }
}

export default SelectPage;

And returned in console output is:

  EventType []                        App.js:23
   EventType ["event2"]          App.js:23  
   EventType ["event1"]          App.js:23
   EventType ["event3"]          App.js:23

So as an output you get your string "EventType" and value of the selected option (value: "event1",. Accordingly if you will use getTextContent you would get as an output the text content (text: "example event 1").

Best, Jakub


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
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Lenovo Desktop
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Related topics