Develop Reference

unable to set state in react for provided situation

i am building a ecommerce web app with react and i am unable to set state profileOptionsLayer when i click on the highlighted listitem both the logs are displayed on the console but component dosent rerender and state "profileOptionsLayer" is not updated either ,i am unable to locate the reason need help!
ALL imports .....
const TemporaryDrawer = ({
profileDrawerlayer,
setprofileDrawerlayer,
setuserDetails,
userDetails,
}) => {
const [profileOptionsLayer, setprofileOptionsLayer] = useState();
console.log(profileOptionsLayer);
return (
<>
<Drawer
anchor={"right"}
open={profileDrawerlayer}
onClose={() => {
setprofileDrawerlayer(false);
}}
>
<Box
sx={{ width: 250, background: "lightblue", height: "100%" }}
role="presentation"
onClick={() => {
setprofileDrawerlayer(false);
}}
onKeyDown={() => {
setprofileDrawerlayer(false);
}}
>
<List>
////////////////////////////////////// Below ///////////////////////////////////////////////
<ListItem disablePadding>
<ListItemButton
onClick={() => {
console.log("dsadsa");
setprofileOptionsLayer("View"); <= unable to set this state
console.log(profileOptionsLayer);
console.log("dsadsa");
}}
>
<ListItemIcon>
<VisibilityIcon />
</ListItemIcon>
<ListItemText primary={"View Profile"} />
</ListItemButton>
</ListItem>
/////////////////////////////////////// UP /////////////////////////////////////////
<ListItem
disablePadding
onClick={() => {
localStorage.removeItem("userId");
setuserDetails("");
}}
>
<ListItemButton>
<ListItemIcon>
<LogoutIcon />
</ListItemIcon>
<ListItemText primary={"Logout"} />
</ListItemButton>
</ListItem>
</List>
<Divider />
</Box>
</Drawer>
{profileOptionsLayer &&<ProfileOptions {...{ userDetails }} />}
</>
);
};
export default TemporaryDrawer;

Formik & MUI why doesn't it show the error text?

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!

How can I keep label not closed in MUI 5 datepicker?

Is there a way to keep Material 5 Datepicker to not close if there's a label but no value?
Currently:
Currently
What I try to get:
Expected
Code:
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
I tried to make an own <Box> label above <DatePicker> with styling but I was wondering if there is a cleaner option.

Use InputLabelProps={{ shrink: true }} prop on your TextField component like this:
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} InputLabelProps={{ shrink: true }} />}
/>

Is there a way to hide form items that already exist in the database

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

How to control the position of the text in the selector in antd UI？

I am using antd's selector, I want to add a prompt to the left of the selection box to indicate what this selector is used to select. I tried to use the label tag in the select tag, but this will give an error. I also thought about using pseudo-elements, but that didn't work. Do you know how to do it. The effect I want is as follows. The left side of the selection box is the prompt word, and the right side is the selection result of the selector.

There is no build-in way, you need to compose it from other components.
For example: using CheckBox, Dropdown, Menu and layout components like Row and Col
const data = ['Jack', 'Lucy', 'Momo', 'Alex'];
export default function App() {
const [selected, setSelected] = useState('Jack');
const menu = (
<Menu onSelect={({ key }) => setSelected(key)}>
{data.map(item => (
<Menu.Item key={item} value={item}>
{item}
</Menu.Item>
))}
</Menu>
);
return (
<FlexBox>
<FlexBox>
<h3>All Checkboxed</h3>
<Select defaultValue="Jack">
{data.map(uniqueValue => (
<Select.Option value={uniqueValue} key={uniqueValue}>
<Checkbox>{uniqueValue}</Checkbox>
</Select.Option>
))}
</Select>
</FlexBox>
<FlexBox>
<h3>Side By Side</h3>
<Checkbox disabled>
<Select defaultValue="Jack">
{data.map(uniqueValue => (
<Select.Option value={uniqueValue} key={uniqueValue}>
{uniqueValue}
</Select.Option>
))}
</Select>
</Checkbox>
</FlexBox>
<FlexBox>
<Card size="small" style={{ width: 120 }}>
<Row type="flex" gutter={10}>
<Col>
<Checkbox disabled />
</Col>
<Col>
<Dropdown overlay={menu} trigger={['click']}>
<Row type="flex" style={{ alignItems: 'center' }} gutter={10}>
<Col>{selected}</Col>
<Col>
<Icon type="down" />
</Col>
</Row>
</Dropdown>
</Col>
</Row>
</Card>
</FlexBox>
</FlexBox>
);
}