How to capture and clear multiple React-Boostrap <Form.Select>'s

Question

Been trying to find some example of this or documentation on it specifically. But almost all things I find are relating to either a multi-select dropdown, which this is not or a single <Form.Select>.

The issue is, I cannot figure out how to clear the state on all of my <Form.Select> dropdowns, using a button. Essentially resetting the entire state. There is also the question that I have yet to get to, how do I also grab the data from each <Form.Select>?

Here is the code:

function FilterIssues() {


    const [states, setStates] = useState([]);
    const [selectValue, setSelectValue] = useState("");

    const changeToCategory = (e) => {
        let filterCategory = issueCategorySubCategory.SubCategory.filter(
            (item) => item.CategoryId === parseInt(e.target.value)
        );
        setStates(filterCategory);
    };

    return (
        <Card style={{ width: '50%', marginLeft: 'auto', marginRight: 'auto', marginTop: '0.5%' }} border='secondary'>
            <Card.Body style={{ paddingTop: '2%', paddingBottom: '2%' }}><h4>Filter Issues</h4>
                <Form>
                    <Row className="mb-4">
                        <Form.Group as={Col} controlId="formGridOwner">
                            Site
                            <Form.Select
                                name='site'
                                value={selectValue}
                                onChange={(e) => setSelectValue(e.target.value)}
                            >
                                <option value="">Choose...</option>
                                {walkSiteProfileType.Site.map((item) => {
                                    return (
                                        <option value={item}>{item}</option>
                                    );
                                })};
                            </Form.Select>
                        </Form.Group>
                        <Form.Group as={Col} controlId="formGridStatus">
                            Profile
                            <Form.Select
                                name='profile'
                                value={selectValue}
                                onChange={(e) => setSelectValue(e.target.value)}
                            >
                                <option value="">Choose...</option>
                                {walkSiteProfileType.Profile.map((item) => {
                                    return (
                                        <option>{item}</option>
                                    );
                                })};
                            </Form.Select>
                        </Form.Group>
                        <Form.Group as={Col} controlId="formGridStatus">
                            Type
                            <Form.Select
                                name='type'
                                value={selectValue}
                                onChange={(e) => setSelectValue(e.target.value)}
                            >
                                <option value="">Choose...</option>
                                {walkSiteProfileType.Type.map((item) => {
                                    return (
                                        <option>{item}</option>
                                    );
                                })};
                            </Form.Select>
                        </Form.Group>
                    </Row>
                    <Row className="mb-4">
                        <Form.Group as={Col} controlId="formGridOwner">
                            Status
                            <Form.Select
                                name='status'
                                value={selectValue}
                                onChange={(e) => setSelectValue(e.target.value)}
                            >
                                <option value="">Choose...</option>
                                {issueCategorySubCategory.Status.map((item) => {
                                    return (
                                        <option>{item}</option>
                                    );
                                })};
                            </Form.Select>
                        </Form.Group>
                        <Form.Group as={Col} controlId="formGridCategory">
                            Category{" "}
                            <Form.Select
                                name='category'
                                value={selectValue}
                                onChange={(e) => {
                                    changeToCategory(e);
                                    setSelectValue(e.target.value)}}
                            >
                                {issueCategorySubCategory.Category.map((item) => {
                                    return (
                                        <option value={item.CategoryId} key={item.CategoryId}>
                                            {item.CategoryName}
                                        </option>
                                    );
                                })}
                                <option value="">Choose...</option>
                            </Form.Select>
                        </Form.Group>
                        <Form.Group as={Col} controlId="formGridSubCategory">
                            Subcategory{" "}
                            <Form.Select
                                name='subcategory'
                                value={selectValue}
                                onChange={(e) => setSelectValue(e.target.value)}
                            >
                                {states.map((item) => {
                                    return (
                                        <option value={item.SubId} key={item.SubId}>
                                            {item.name}
                                        </option>
                                    );
                                })}
                                <option value="">Choose...</option>
                            </Form.Select>
                        </Form.Group>
                    </Row>
                </Form>
            </Card.Body>
            <Card.Footer>
                <Button variant='success' className='m-1'>Filter Issues</Button>
                <Button variant='danger' className='m-1' onClick={() => setSelectValue("")}>Clear Filter</Button>
                <AddNewIssueModal></AddNewIssueModal>
            </Card.Footer>
        </Card>
    )
}

Essentially right now, when I select an item from one dropdown, it will reset the state on all the other dropdowns. I have tried setting a variable to hold the values, but my implementation was not correctly working (not very experienced with React).

The reset-function on the button works, but its because there is only one actual item to reset. So I must be missing some important piece here.

The end-goal is to clear all 6 dropdowns to their original state "", when I use the "Clear Filter" button. Then I would also like to grab the values from all dropdowns when I use the "Filter Issues" button.

I have attempted to store the values in a central construct, but the implementation with states does not seem to be correct and I'm looking for an example, which I could not find online.

Answer 1

Was able to get this working by implementing the following code.

    const [selectValue, setSelectValue] = useState({
        site: "",
        profile: "",
        type: "",
        status: "",
        category: "",
        subcategory: "",
    });

    const changeToCategory = (e) => {
        let filterCategory = issueCategorySubCategory.SubCategory.filter(
            (item) => item.CategoryId === parseInt(e.target.value)
        );
        setStates(filterCategory);
    };

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setSelectValue((prevProps) => ({
            ...prevProps,
            [name]: value
        }));
        if (name === 'category') {
            changeToCategory(event);
        }
    }

Then modifying the one <Form.Select> to be:

                     <Form.Select
                                name='subcategory'
                                value={selectValue['subcategory']}
                                onChange={handleInputChange}
                            >
                                {states.map((item) => {
                                    return (
                                        <option value={item.SubId} key={item.SubId}>
                                            {item.name}
                                        </option>
                                    );
                                })}
                                <option value="">Choose...</option>
                            </Form.Select>