Why does component not rerender although props are changing

kravmaguy · February 12, 2021, 10:59pm

Can someone give a hint why component does not rerender although props are changing:

why is select box not rerendering although its props are changing?

KravMaguy/nextjs-starter-dimension/blob/add-form-features/components/Select.js

import Select from 'react-select';
import makeAnimated from 'react-select/animated';
// import { colourOptions } from '../data';
 


const devOptions = [
    { value: 'marketing', label: 'Marketing' },
    { value: 'design', label: 'Design' },
    { value: 'seo', label: 'SEO' },
    { value: 'php', label: 'PHP' },
    { value: 'node js', label: 'Node Js' }
  ]
const animatedComponents = makeAnimated();

export default function AnimatedMulti(props) {
  console.log(props, 'select props')

  return (
    <Select

This file has been truncated. show original

appreciate all help/hints thank you very much.

Sky020 · February 14, 2021, 12:40am

Hello there,

This is just a guess, as I have never used the react-select > Select component:

Perhaps, as the props changing are being used as defaultValues, it does not matter if they change…the component will always use the first values passed to the default.
Select does not look for changes in the defaultValue

Hope this helps

kravmaguy · February 14, 2021, 12:43am

Ive fixed this. React-Select is now behaving as desired:

and the form reset button is clearing it as well.

Sky020 · February 14, 2021, 1:16am

Glad to hear.

Well done, and happy coding