Topic: MDBSelect with VectorMaps

cariforef priority asked 1 year ago

Expected behavior MDBSelect stays on the value selected. like in the documentation Actual behavior MDBSelect value return to defaultvalue Resources (screenshots, code snippets etc.)

Krzysztof Wilk staff answered 1 year ago


You can wrap the select data in the useMemo hook or move it to the constant outside of the component to prevent rendering it everytime component rerenders. So it should look like this:

import React, { useEffect, useState } from 'react';
import { MDBRow, MDBSelect, MDBCol, MDBContainer } from 'mdb-react-ui-kit';
import { MDBVectorMap } from 'mdb-react-vector-maps';

const SELECT_DATA = [
  { text: 'World', value: 'world' },
  { text: 'World Pacific', value: 'worldPacific' },
  { text: 'Europe', value: 'europe' },
  { text: 'Africa', value: 'africa' },
  { text: 'North America', value: 'northAmerica' },

function App() {
  const [selectVal, setSelectVal] = useState('world');

  return (
          <MDBCol lg='12' md='12' className='mb-4'>
              onValueChange={(e: any) => {
          <MDBCol lg='12' md='12' className='mb-4'>
            <MDBVectorMap map={selectVal} fill='white' style={{ backgroundColor: '#bbdefb' }} />
            <p className='px-3'>
              Selected: <strong>{selectVal}</strong>

export default App;

cariforef priority commented 1 year ago

Thanks, it works better.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 4.1.0
  • Device: MAC
  • Browser: Chrome
  • OS: Mac OSX 15
  • Provided sample code: No
  • Provided link: Yes