react-select | react select component https | Frontend Framework library

What you are looking for is a cascading select .

Map is the right way.

Try this:

It indicates the incoming size is an any type and typescript does not know if it is one of the keys of sm md lg.

Way 01: use cast to inform typescript, size is one of the sm md lg

this line of code get the error

If that is the actual code of your loadOptions function then there are a couple of issues with it:

• It does not return any meaningful value (it returns undefined, and accounting for async it has return type Promise)
• It performs no side effects

From the practical side it does nothing usefull at all and just throwing away response data.

To fix that you may take one of the following approaches:

1. Return something useful. Then you have to annotate return type of the function:

When using Formik there is no need to maintain an external state to keep track of form values . Formik does that job for you . So you can safely remove this

So there are several problems here

1. Component Checkbox doesn't take any props
2. const Tablehead = (handleSelectAll, isCheckAll) should be const Tablehead = ({ handleSelectAll, isCheckAll })

And most important one is your TableHead and TableBodyComponents both need this checkbox information so you need to lift your state up from TableBody to Table Component.

Also the example code you are following seems to do a lot of redundant things which are not necessary to implement your feature. Simply storing a checked property in each of your droplets should be enough and two functions to toggle individual and toggle all.

So I made the above changes in your code-sandbox link.

Here is the Link

Your value is of type object with the keys label and value . To extract only the value from your selected option .

In your select handler you are getting the selected option in the name selectedFromPlace .

So to get only the value you need to do selectedFromPlace.value

The issue is in the displayModalContent file where you are trying to set state in the componentDidUpdate. When you are closing the modal the componetDidUpdate will be called and at that point, the item will be null and you are trying to get a property on a null value. So either you can use componentDiDMount if you only want to set the data once on the component mounting or else you can use optional chaining(MDN) so that it doesn't break the app when there is no object coming from the props.