CODEWITHSUNDEEP
reactjsreduxreact-select
ambrecht-web
ambrecht-web

Reputation: 77

Is there a way to re-render a React-Select Component once the useSelector hook returns a value?

I have a form, when I enter data into it and submit it, I send the data to a reducer, then save it to a SQL database. The database returns me the entered data plus an ID and I store this in my store.

Now I have another React-Select component and I want it to show the entered data as DefaultValue.

I'm looking for a way to get the React select component to reload when a true value is returned from the useSelector hook, and preferably whenever that value changes.

import React, { useEffect } from 'react';
import Select from 'react-select';
import { useDispatch, useSelector } from 'react-redux';
import {
  getSelectOptions,
  getOptions,
  setSelectionValue,
  getBookOptions,
} from '../store/selectReducer';

export default function selectForm() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getSelectOptions());
  }, []);

  const autoren = useSelector(getOptions).autorOpts;

  //>>>>>>>>>>>>>> Here I retrieve the desired data from the store <<<<<<<<<<<<<<<<<<<<<<
  const DEFAULTVALUE = useSelector(store => store.authorBook.author);

  const onChangeAut = option => {
    dispatch(setSelectionValue(option));
    dispatch(getBookOptions(option.id));
  };

  return (
    <div>
      <Select onChange={onChangeAut} defaultValue={DEFAULTVALUE} isClearable options={autoren} />
    </div>
  );
}

Upvotes: 2

Views: 5967

Answers (2)

Faruk Ger&#231;ek
Faruk Ger&#231;ek

Reputation: 1

If you remove the MenuList component from the select components properties, it will be fixed. It worked for me.

Upvotes: 0

Kishieel
Kishieel

Reputation: 2053

Don't use defaultValue because it can't be updated. Simply use value and component should update be them-self when state change.

Upvotes: 11

Related Questions