const availableSelection = ["foo", "bar", "john"];
validationSchema: Yup.object({
freelancers: Yup.array().of(Yup.string()).min(1, 'Error text')
}),
<FormControl sx={{ width: 1 }}>
<InputLabel>{t('Freelancers')}</InputLabel>
<Select
error={Boolean(formik.touched.freelancers && formik.errors.freelancers)}
name="freelancers"
helperText={formik.touched.freelancers && formik.errors.freelancers}
multiple
value={formik.values.freelancers}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
input={<OutlinedInput name="freelancers" label={'Freelancers'} />}
renderValue={(selected) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
)}
MenuProps={MenuProps}
>
{availableSelection.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, formik.values.freelancers, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
image
image
Hello guys, have problem with multiple select. Does not show error if submitting form,but borders change color to red. Thanks for help!
Related
I'm trying to show the data, I fetched from Api in select menu. but there seems to be a issue. I'm getting the data, but it's not showing in the select menu. it just shows empty. but I can get the mapped data in console. it just not showing in the select component.
help me figure out. thanks in advance :)
here's my code
export function TransferRBTCard(props) {
const [TransferData, setTransferData] = useState([])
const [ContactValue, setContactValue] = useState('')
const handleChange = (event) => {
setContactValue(event.target.value);
};
const TokenData = () => {
axios.get('http://localhost:8006/api/v2/get/list').then(function (res) {
try {
var result = res.data.data;
console.log(result)
setTransferData(result)
}
catch (error) {
console.log(error)
}
})
}
useEffect(() => {
TokenData()
}, [])]
const handleSubmit = (evnt,) => {
evnt.preventDefault();
axios.post('http://localhost:8006/api/v2/add/transfer')
.then(response => {
if (response.data.success === true) {
alert(response.data.message)
}
})
.catch(error => {
console.log(error.message)
});
}
return (
<Card {...props}>
<CardContent>
<Stack direction="row" alignItems="center" gap={1}>
<ShareOutlinedIcon sx={{ color: "text.secondary" }} />
<Typography sx={{ fontSize: 16, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
Transfer RBT
</Typography>
</Stack>
<Grid>
<FormControl size="small" fullWidth >
<Stack flexDirection='column' gap={1.5} mt={1}>
<InputLabel id="Contact Select" sx={{ mt: 1 }}>Select Contact</InputLabel>
<Select
labelId="Contact Select"
id="demo-simple-select"
value={ContactValue}
label='Select Contact'
onChange={handleChange}
>
{TransferData.map((data) => {
<MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
})}
</Select>
<TextField
id="filled-hidden-label-small"
label="Receiver" variant="outlined" size="small"
onChange={handleChange}
value={TransferData}
name="Receiver"
inputProps={
{ readOnly: true, }}
className="form-control"
/>
<TextField
id="filled-hidden-label-small" type='number'
label="Amount" variant="outlined" size="small"
onChange={handleChange}
name="Amount"
className="form-control"
/>
<TextField
id="filled-hidden-label-small"
label="Comments" variant="outlined"
multiline
rows={2}
onChange={handleChange}
name="Comments"
className="form-control"
/>
<Button
variant="contained"
type="submit"
onClick={handleSubmit}
sx={{ alignSelf: 'center', backgroundColor: '#000073' }} >Submit</Button>
</Stack>
</FormControl>
</Grid>
</CardContent>
</Card>
);
}
You are not returning from the map function (more correctly, you return undefined by not stating a return).
Change this:
{TransferData.map((data) => {
<MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
})}
to this:
{TransferData.map((data) => (
<MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
))}
Note that it is the same as writing:
{TransferData.map((data) => {
return <MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>
})}
I would like to change the colors of each title={note.title} subheader={note.category} I have tried
const theme = createTheme ({
palette: {
category: {
color: blue
}
}
})
But that hasn't worked I have also tried inline
sx={{fontSize: 16,color: '#000000'}} again no luck.
How can I go about editing the color for those 2 sections?
<div>
<Card elevation={10} className={classes.test}>
<CardHeader
action={ // 200
<IconButton onClick={() => handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
title={note.title}
subheader={note.category}
/>
<CardContent>
<FormGroup>
<FormControlLabel sx={{fontSize: 16,color: '#000000'}} control={<Checkbox />} label={note.details} />
<FormControlLabel sx={{fontSize: 16,color: '#555555'}} control={<Checkbox />} label={note.details2} />
</FormGroup>
</CardContent>
</Card>
</div>
)
Full code here : https://github.com/Orelso/Project-notes
You can pass node in the title and subheader -
<CardHeader
action={ // 200
<IconButton onClick={() => handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
title={<span style={{fontSize: 16, color: "#000000"}}>{note.title}</span>}
subheader={<span style={{fontSize: 12, color: "#000000"}}>{note.category}</span>}
/>
I'm developing a web app using React + Material UI. I would like to change the font size of the Select component. I'm having to use the MenuProps property, as the code snippet that follows. However, it's not working.
const MenuProps = {
PaperProps: {
sx: {
'& .MuiMenuItem-root': {
fontSize: 10,
},
},
style: {
fontSize: 10,
},
},
};
const MultipleSelectTags = () => {
const [tagFilter, setTagFilter] = useState([]);
const handleChange = (event) => {
const {
target: { value },
} = event;
setTagFilter(
typeof value === 'string' ? value.split(',') : value,
);
};
return (
<div>
<FormControl sx={{ m: 1, width: 200 }} size="small">
<InputLabel>Tag</InputLabel>
<Select
multiple
value={tagFilter}
onChange={handleChange}
input={<OutlinedInput label="Tag" />}
renderValue={(selected) => selected.join(', ')}
MenuProps={MenuProps}
>
{names.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={tagFilter.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
Can somebody help me?
You can just add the font size prop directly to the Input:
<Select
multiple
value={tagFilter}
onChange={handleChange}
input={<OutlinedInput sx={{fontSize: '2rem'}} label="Tag" />}
renderValue={(selected) => selected.join(', ')}
>
{names.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={tagFilter.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
Here is a solution:
<Select
multiple
value={tagFilter}
onChange={handleChange}
input={<OutlinedInput label="Tag" />}
renderValue={(selected) => selected.join(', ')}
id="my-simple-select"
sx={{
'& #my-simple-select': {
fontSize: '2rem',
}
}}
>
{names.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={tagFilter.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
Also, if you want to apply it on the class level: '& .MuiSelect-select'
This is how I did it
<Select fullWidth
labelId="stateIdlabel"
id="stateId"
name="stateId" value={values.stateId}
label="label"
sx={{fontSize:'large'}}>
<MenuItem sx={{fontSize:'large'}} value={1}>OK</MenuItem>
<MenuItem sx={{fontSize:'large'}} value={2}>NOT</MenuItem>
</Select>
const AddPartQuestionModalAgain = ({
isModalVisible,
hideModal,
questionData = {
question_no: '',
question_parts: [''],
},
}) => {
const dispatch = useDispatch()
let formInput
console.log(questionData)
return (
<>
<Modal
visible={isModalVisible}
onCancel={() => {
formInput.resetFields()
hideModal()
}}
width={1200}
>
<Form
layout='vertical'
ref={(ref) => {
formInput = ref
}}
name='dynamic_form_item'
>
<Form.List name='question_parts' key='question_parts'>
{(fields, { add, remove }, { errors }) => (
<>
{fields.map((field, index) => (
<Space
key={field.key}
direction='vertical'
>
<Form.Item key={`QuestionPart${index}`}>
<Row>
<Col span={10}>
<div
style={{
overflow: 'auto',
height: 400,
width: 590,
}}
>
<Form.Item
{...field}
label={`Question Part ${index + 1} Description`}
fieldKey={[field.fieldKey, 'part_desc']}
name={[field.name, 'part_desc']}
key={`part_desc${index}`
>
<Input.TextArea
rows={8}
placeholder='Description'
/>
</Form.Item>
<Form.Item
{...field}
label={`Question Part ${index + 1} Marks`}
fieldKey={[field.fieldKey, 'part_total_marks']}
name={[field.name, 'part_total_marks']}
key={`part_total_marks${index}`}
>
<Input
placeholder='Marks'
style={{
border: '1px solid black',
width: 450,
}}
/>
</Form.Item>
</div>
</Col>
<div class='vl'></div>
<Col span={12} offset={2}>
<div
>
<Form.List
{...field}
name='part_guided_answer'
fieldKey={[field.fieldKey, 'part_guided_answer']}
name={[field.name, 'part_guided_answer']}
key={`part_guided_answer${index}`}
>
{(fields, { add, remove }, { errors }) => (
<>
{fields.map((field, index) => (
<Space
key={field.key}
direction='vertical'
>
<Form.Item key={`QuestionPart${index}`}>
<Form.Item
{...field}
label={` Question Part Guided Answer ${
index + 1
}`}
fieldKey={[
field.fieldKey,
'part_model_ans',
]}
name={[field.name, 'part_model_ans']}
key={`part_model_ans${index}`}
>
<Input.TextArea
rows={4}
placeholder='Guided Answer'
/>
</Form.Item>
<Form.Item
{...field}
label={`Question Part
Guided Answer Marks ${index + 1}`}
fieldKey={[
field.fieldKey,
'part_answer_mark',
]}
name={[
field.name,
'part_answer_mark',
]}
key={`part_answer_mark${index}`}
>
<Input
placeholder='Guided Answer Marks'
}}
/>
</Form.Item>
<MinusCircleOutlined
className='dynamic-delete-button'
onClick={() => remove(field.name)}
/>
</Form.Item>
</Space>
))}
<Form.Item style={{ fontWeight: 'bold' }}>
<Button
type='dashed'
onClick={() => add()}
icon={<PlusOutlined />}
>
Add Question Part Guided Answer
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
</div>
</Col>
<MinusCircleOutlined
className='dynamic-delete-button'
onClick={() => remove(field.name)}
/>
</Row>
<div class='vr'></div>
</Form.Item>
</Space>
))}
<Form.Item>
<Button
type='dashed'
onClick={() => add()}
icon={<PlusOutlined /
>
Add Question Part
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
</Form>
</Modal>
</>
)
}
The above code basically gives me this picture below
what I would like to do is hide the items that already exist which is in the blue circle and only show items without anything inside and I would also like to have it so that it resets every time I open it because right now(see picture below) even if there is nothing inside it shows me this
that's because in my database my table for these values are null
| Question_id |part_id | part_desc | part_model_ans|answer_mark|
| ------------|--------------|-----------| --------------|-----------|
|10 | null | null | null |null |
|10 | null |null | null |null |
you can hide it like this, Since you can count the string of the text, In your case the text will be coming from server right
return (<div>
{firstname.length > 0 ? null: <p>FirstName</p> }
{secondName.length > 0 ? null: <p>secondName</p> }
{thirdName.length > 0 ? null: <p>thirdName</p> }
</div>)
I'm using getOptionLabel from material-ui but I don't know why it doesn't work fine.
I want to select from an array of elements (not objects). If I write getOptionLabel={props.roles} doesn't run and
in the code I wrote below I have as a result all the elements of the array for each row.
What is wrong?
<AutoComplete
multiple
id="checkboxes-tags-demo"
options={props.roles}
disableCloseOnSelect
getOptionLabel={(options) => `${options}`}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{props.roles}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="props.roles"
placeholder="Available Roles"
/>
)}
/>