MDBSelect with VectorMaps

Hi!

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 (
    <>
      <MDBContainer>
        <MDBRow>
          <MDBCol lg='12' md='12' className='mb-4'>
            <MDBSelect
              value={selectVal}
              data={SELECT_DATA}
              onValueChange={(e: any) => {
                setSelectVal(e.value);
              }}
            />
          </MDBCol>
          <MDBCol lg='12' md='12' className='mb-4'>
            <MDBVectorMap map={selectVal} fill='white' style={{ backgroundColor: '#bbdefb' }} />
            <p className='px-3'>
              Selected: <strong>{selectVal}</strong>
            </p>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </>
  );
}

export default App;