Infinite loop when setting state as object from MDBSelect ge

Topic: Infinite loop when setting state as object from MDBSelect getValue()

web_ntx premium asked 11 months ago

Expected behavior

Set an object as the state using the return from <MDBSelect getValue()>

Actual behavior

Setting an object as the state triggers an infinite re-render loop. It works normally if a single value is set as the state instead of an object.

Resources (screenshots, code snippets etc.)

import React, { useState } from 'react';
import { MDBSelect } from 'mdb-react-ui-kit';

export default function TestComponent() {
  const [obj, setObj] = useState({});

  const handleChange = (e) => {
    setObj({ foo: e }); // triggers infinite re-render
    // this works however: setObj(e);
    console.log(obj);
  };
  return (
    <div className='mt-5 d-flex justify-content-center'>
      <MDBSelect
        data={[
          { text: 'One', value: 1 },
          { text: 'Two', value: 2 },
          { text: 'Three', value: 3 }
        ]}
        getValue={(e) => handleChange(e)}
      />
    </div>
  );
}

Add comment

web_ntx premium answered 11 months ago

0 0 Best answer

Here is a solution for future reference:

import React, { useState, useEffect } from 'react';
import { MDBSelect } from 'mdb-react-ui-kit';

export default function TestComponent() {
  const [val, setVal] = useState();
  const [obj, setObj] = useState({});

  useEffect(() => {
    setObj({ text: val });
    console.log(val);
  }, [val]);

  return (
    <div className='mt-5 d-flex justify-content-center'>
      <MDBSelect
        data={[
          { text: 'One', value: 1 },
          { text: 'Two', value: 2 },
          { text: 'Three', value: 3 },
        ]}
        getValue={(foo) => setVal(foo)}
      />
    </div>
  );
}

Add comment

Krzysztof Wilk staff answered 11 months ago