Create ListItem component
This commit is contained in:
@@ -0,0 +1,39 @@
|
|||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import Box from '@mui/material/Box'
|
||||||
|
import InputLabel from '@mui/material/InputLabel'
|
||||||
|
import FormControl from '@mui/material/FormControl'
|
||||||
|
import NativeSelect from '@mui/material/NativeSelect'
|
||||||
|
|
||||||
|
export default function ListItems({items, selectLabel, setSelectValue}) {
|
||||||
|
const handleChange = event => {
|
||||||
|
setSelectValue(event.target.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{minWidth: 120, marginBlock: 5}}>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<InputLabel variant='standard' htmlFor='titre'>
|
||||||
|
{selectLabel}
|
||||||
|
</InputLabel>
|
||||||
|
<NativeSelect
|
||||||
|
defaultValue=''
|
||||||
|
inputProps={{
|
||||||
|
name: 'content',
|
||||||
|
id: 'titre',
|
||||||
|
}}
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
{items.map(({id, contenu}) => (
|
||||||
|
<option key={id} value={id}>{contenu}</option>
|
||||||
|
))}
|
||||||
|
</NativeSelect>
|
||||||
|
</FormControl>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
ListItems.propTypes = {
|
||||||
|
items: PropTypes.array.isRequired,
|
||||||
|
selectLabel: PropTypes.string.isRequired,
|
||||||
|
setSelectValue: PropTypes.func.isRequired
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user