Get InputBase value out from the same component - reactjs

Question

I have different places that use the same input component.
Below are the input component:
const stationSelection = (stationName) => {
return (
<Paper
component="form"
elevation={5}
sx={{
m: '10px 0 30px 5px',
p: '2px 4px',
display: 'flex',
alignItems: 'center',
width: 300,
}}
>
//HERE
<InputBase
sx={{ ml: 1, flex: 1 }}
placeholder="Please select a station."
value={stationName}
onChange={ /*how to get the data each of the input*/ }
/>
<Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
<IconButton
color="primary"
sx={{ p: '10px' }}
aria-label="directions"
>
<ArrowDropDownCircleOutlinedIcon />
</IconButton>
</Paper>
)
}
In my react app, I will use it two times for different input.
<CardContent className="default-font">
<Box sx={{ mb: 10 }}>
<Box className="bold">DEPARTURE STATION</Box>
{stationSelection(departStation)} //HERE
<Box className="center">
<Box className="bold" sx={{ flexGrow: 1 }}>
ARRIVAL STATION
</Box>
<IconButton
color="primary"
sx={{ p: '5px', m: '-10px 0 -10px 0' }}
>
<ImportExportIcon />
</IconButton>
</Box>
{stationSelection(arriveStation)} //HERE
</Box>
{ticketDetails()}
</CardContent>
Because I use it two times by using the different variables into the same component, it makes it difficult for me to found out a way to get the data out from the component.
Here are my useState in case you need that.
const [departStation, setDepartStation] = useState('');
const [arriveStation, setArriveStation] = useState('');
Basically, I need to get that two user input.
Full code link.

Answer 1

First, you functional component should start with a capital letter, so change your declaration to:
const StationSelection = ...
Second, in order to edit the state in your component, you should also pass the setter method, and change it in the onChange function:
const StationSelection = ({ stationName, setStationName }) => {
const handleStationChange = (e) => {
setStationName(e.target.value)
}
return (
<Paper
component="form"
elevation={5}
sx={{
m: '10px 0 30px 5px',
p: '2px 4px',
display: 'flex',
alignItems: 'center',
width: 300,
}}
>
//HERE
<InputBase
sx={{ ml: 1, flex: 1 }}
placeholder="Please select a station."
value={stationName}
onChange={handleStationChange}
/>
<Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
<IconButton
color="primary"
sx={{ p: '10px' }}
aria-label="directions"
>
<ArrowDropDownCircleOutlinedIcon />
</IconButton>
</Paper>
)
}
Finally, change your main component like this
<CardContent className="default-font">
<Box sx={{ mb: 10 }}>
<Box className="bold">DEPARTURE STATION</Box>
<StationSelection stationName={departStation} setStationName={setDepartStation} />
<Box className="center">
<Box className="bold" sx={{ flexGrow: 1 }}>
ARRIVAL STATION
</Box>
<IconButton
color="primary"
sx={{ p: '5px', m: '-10px 0 -10px 0' }}
>
<ImportExportIcon />
</IconButton>
</Box>
<StationSelection stationName={arriveStation} setStationName={setArriveStation} />
</Box>
{ticketDetails()}
</CardContent>