Topic: MDBSelect with VectorMaps

cariforef priority asked 2 years 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.) https://mdbootstrap.com/snippets/react/cariforef/4310967


Krzysztof Wilk staff answered 2 years ago


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;

cariforef priority commented 2 years ago

Thanks, it works better.



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

  • 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