Categories
Mastering Development

Dynamically create components that takes in setState

I have to use a Select component that takes in a value argument and a setValue argument. Where I need to pass in a state and a set state.

eg:

const [value, setValue] = useState();
...
return (
    ...
    <Select value={value} setValue={setValue} options={optionsArray}/>
)

Now I need to dynamically create multiple of these Select components based on an user input. How do I declare my state and setState variables for this task?

I was thinking of using state as an object array, eg. value['option1'] but I can’t figure out how I can pass in the setValue part, so far I have tried passing in a custom function such as:

const setOptionValue = (value) = {
    value.push({option1: value})
}

However I am stuck because setOptionValue method does not know what the corresponding option is (doesn’t know which one of the select field the user changed)

Any tips on how to solve this situation?

Leave a Reply

Your email address will not be published. Required fields are marked *