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

Question

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!

Answer 1

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)
}