How to change the options in Fw-Select dynamically

App Platform
, ,
1

Hi

I couldn’t update the option in Select.

<FwSelect
  placeholder='Your choices'
  onFwChange={(e)=> setEditCity(e.target.value)}
  value={editCity}
  options={availableCities}
/>

The UI does not update the options when the state is changed.

Thank you.

2

Hey @Bene_Immanuel

I set my dynamic options this way using Jquery hope it helps.

<fw-select id="groupsDrp" class="fw-mt-8 fw-flex-grow fw-mr-8" label="Groups" placeholder="Select Group" required></fw-select>

Setting Options

const mappedGroups = groups.map((item) => ({ value: item.id, text: item.name }));
$("#groups")[0].options = mappedGroups;

Set a particular option selected in the fw-select

$("#boardsDrp")[0].value = item.id

3

I haven’t used FwSelect in React. But, I’ve used FwListOptions. It should work similar to FwSelect.

<FwSelect
  placeholder='Your choices'
  onFwChange={(e)=> setEditCity(e.target.value)}
  value={editCity}
  options={availableCities}
/>

If I understand your requirement right, when the values in availableCities changes, you want the changed values to be reflected in the dropdown, right?

For this to work, you will need the component to re-render when the availableCities changes.

In React, re-rendering happens in the following scenarios:

  1. State Changes: If the state of a component changes with the setState function (in class components) or the state updating function from a useState hook (in functional components), the component will re-render. Use useState to manipulate the value of availableCities. (Recommended approach)

  2. Props Changes: If a parent component passes different props to a child component, the child component will re-render. Pass availableCities via props.

  3. Force Update: If the forceUpdate method is called (in class components), the component will re-render. Call forceUpdate after updating the availableCities. (Not recommended)

  4. Parent Re-renders: If a parent component re-renders, its child components will also re-render by default. However, this can be optimized with techniques like shouldComponentUpdate, React.memo, or React.PureComponent.

  5. Hooks Dependency Changes: If a component uses a hook like useEffect, useMemo, or useCallback with a dependency array, and one of the dependencies changes, the component will re-render.

1 Like
4

Thanks for sharing these insights mate as I found it very much useful and informative.