Why my 'Select' components in react are synchronized together?-CodePudding

I am currently using materialui to create a submission page. I have created two 'Select' components for the page, and there is a problem that if I choose an option from the second 'Select' component, the option from the first 'Select' component will be refreshed. I was thinking there is something wrong with the 'onChange', yet I have no idea about the cause for this problem. I want to select all the options from the 'Select' components before submitting the data at once.

Also, is there a way to disable the second 'Select' components before entering an option other than 'None' in the first 'Select' components, and enable it after a valid option has been entered?

Thank you very much for your time and help!

import React, { Component } from 'react';
import { Form, Field } from 'react-final-form';
import { OnChange } from 'react-final-form-listeners';
import { makeStyles, InputLabel, FormControl, Typography, Paper, Link, Grid, Button, CssBaseline, MenuItem, TextField, Select, Box, FormHelperText} from '@material-ui/core';

const useStyples = makeStyles((theme) => ({
    formControl: {
        margin: theme.spacing(2),
        minWidth: 400
    },

    typo1: {
        padding: 30,
        margin: 'auto',
        maxWidth: 600
    },

    typo2: {
        padding: 0,
        margin: 'auto',
        maxWidth: 600
    },
}))

export default function CreatePage() {

    const classes = useStyples()

    const [value, setValue] = React.useState('')
    
    const handleChange = (event) => {
        setValue(event.target.value)
    }

    return (
        <div>
            <Typography variant='h4' align='center' component='h1' gutterBottom className={classes.typo1}>
                Data Submission Form
            </Typography>
            <Typography variant='h5' align='center' component='h2' gutterBottom className={classes.typo2}>
                Material-UI
            </Typography>
            
            <Box display='flex' flexDirection='row'>
                <Box>
                    <FormControl required variant='filled' className={classes.formControl}>
                        <InputLabel shrink>Defect</InputLabel>
                        <Select
                            labelId='defect-select1'
                            id='defect-select1'
                            value={value}
                            displayEmpty
                            onChange={handleChange}>

                        <MenuItem value=''>None</MenuItem>
                        <MenuItem value={'Crack'}>Crack</MenuItem>
                        <MenuItem value={'Scratch'}>Scratch</MenuItem>
                        <MenuItem value={'Rough Surface'}>Rough Surface</MenuItem>
                        <MenuItem value={'Spalling'}>Spalling</MenuItem>
                        </Select>
                        <FormHelperText>Select Defect for Position 1 - Required</FormHelperText>
                    </FormControl>
                </Box>
                <Box>
                    <FormControl required variant='filled' className={classes.formControl}>
                        <InputLabel shrink>Tool</InputLabel>
                        <Select
                            labelId='tool1'
                            id='tool1'
                            displayEmpty
                            value={value}
                            onChange={handleChange}>

                        <MenuItem value=''>None</MenuItem>
                        <MenuItem value={'Tool 1'}>Tool 1</MenuItem>
                        <MenuItem value={'Tool 2'}>Tool 2</MenuItem>
                        <MenuItem value={'Tool 3'}>Tool 3</MenuItem>
                        <MenuItem value={'Tool 4'}>Tool 4</MenuItem>
                        </Select>
                        <FormHelperText>Select Tool Decision for Position 1 - Required</FormHelperText>
                    </FormControl>
                </Box>
            </Box>
        </div>
    );    
}

I would be glad if someone can tell me the root cause for the problem. An additon of a solution for my question would be better!

CodePudding user response：

Well, it seems that you only have 1 value :

const [value, setValue] = React.useState('')

And although you have duplicated the <Select /> component you didn't duplicate the value...

You'll need a second "value" and a second handleChange which will update that second value

const [value2, setValue2] = React.useState('');

const handleChange2 = (event) => {
   setValue2(event.target.value)
}