I have a React frontendand I have styled it using Material UI design.I added the Date and Time component styling to my form and now the form is not able to take up the "name" value and further process with the posting.The prob is only happening in the Date and time input feilds here is the error "TypeError: Cannot read properties of undefined (reading 'name')"....
Pls check out my code thanks.
function ReservationForm(){
const navigate = useNavigate();
const params = useParams();
const {user}=useContext(Cont)
const[reservationData,setReservationData]=useState({
name:"",
date:"",
time:"",
num:"",
contact:"",
occasion:"",
});
function handleReservationChange(event){
setReservationData({
...reservationData,
[event.target.name]: event.target.value,
})
}
function handleReservationSubmit(event){
event.preventDefault();
const newReservation={
...reservationData,
restaurant_id: params.id,
user_id: user.id,
};
fetch(`/reservations`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newReservation),
})
.then((r) => r.json())
.then(
setReservationData({
name:"",
date:"",
time:"",
num:"",
contact:"",
occasion:"",
})
);
navigate("/myreservations");
}
return(
<>
<Box
component="form"
sx={{
"& > :not(style)": { m: 1 },
}}
noValidate
autoComplete="off"
onSubmit={handleReservationSubmit}
>
<h1 className="editheadings">Reserve 🍽️</h1>
<FormControl className="inputstyle">
<InputLabel htmlFor="component-outlined">Name</InputLabel>
<OutlinedInput
type="text"
name="name"
id="name"
value={reservationData.name}
onChange={handleReservationChange}
label="Name"
/>
</FormControl>
<br />
<FormControl>
<LocalizationProvider name="date" dateAdapter={AdapterDayjs} fullWidth>
<DatePicker
name="date"
label="Date"
value={reservationData.date}
onChange={handleReservationChange}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</FormControl>
<FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<TimePicker
name="time" label="Time"
value={reservationData.time} onChange={handleReservationChange}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</FormControl>
<br />
<FormControl className="inputstyle">
<InputLabel htmlFor="component-outlined">No. of Guests</InputLabel>
<OutlinedInput
type="number"
name="num"
value={reservationData.num} onChange={handleReservationChange}
/>
</FormControl>
<br />
<FormControl className="inputstyle">
<InputLabel htmlFor="component-outlined">Contact</InputLabel>
<OutlinedInput
type="tel"
name="contact"
value={reservationData.contact} onChange={handleReservationChange}
placeholder="contact"
/>
</FormControl>
<br />
<FormControl className="inputstyle">
<InputLabel htmlFor="component-outlined">Occasion</InputLabel>
<OutlinedInput
type="text"
name="occasion"
value={reservationData.occasion} onChange={handleReservationChange}
/>
</FormControl>
<Stack paddingLeft={15} direction="row" id="loginbutton">
<ColorButton variant="contained" type="submit">
{" "}
Update Reservation
</ColorButton>
</Stack>
</Box>
</>
)
}
export default ReservationForm;
Since DatePicker and TimePicker onChange events send the new value instead of event, you need to add new handleChange function for DatePicker and TimePicker components like:
function handleReservationChangeWithNameAndValue(name, newValue) {
setReservationData({
...reservationData,
[name]: newValue
});
}
and pass it in DatePicker and TimePicker components accordingly:
<DatePicker
name="date"
label="Date"
value={reservationData.date}
onChange={(newVal) =>
handleReservationChangeWithNameAndValue("date", newVal)
}
renderInput={(params) => <TextField {...params} />}
/>
<TimePicker
name="time"
label="Time"
value={reservationData.time}
onChange={(newVal) =>
handleReservationChangeWithNameAndValue("time", newVal)
}
renderInput={(params) => <TextField {...params} />}
/>
You can take a look at this sandbox for a live working example of your form with this function.
Better to check this function.
function handleReservationChange(event){
setReservationData({
...reservationData,
[event.target.name]: event.target.value,
})
}
Based on this function, every field should have name property. But as you can see some of them have not that property.
I used react admin's data grid to show my data from api and put functionField with Delete mui on it. I would like to exempt one column like to toggle DeleteButton to render modal but in datagrid I always forwarded to another view, here's my sample component
<List
actions={<ListActions />}
bulkActionButtons={false}
{...props}
sort={{
field: 'name',
order: 'DESC'
}}
empty={true}
>
<Datagrid rowClick="edit" >
<TextField label="Account No." source="account_number" emptyText="-" />
<TextField label="Account ID" source="accountId" emptyText="-" />
<TextField label="Balance" source="balance" emptyText="-" />
<FunctionField label="Action" render={ (rec: any) => <Delete onClick={() => handleDelete(rec)} /> } />
</Datagrid>
</List>
but each time I click the delete button it redirect to edit view thanks
Because you specified <Datagrid rowClick="edit">, any click on a row redirects the user to the corresponding edit view. If that's not what you want, you have two options:
remove the rowClick="edit" bit, and add an <EditButton> on every row instead.
in your click event handler, cancel event propagation to avoid that it's handled by DatagridRow after you handle it.
<Delete onClick={(event) => {
handleDelete(rec);
event.stopPropagation();
}} />
I am using select from material UI but the issue I'm facing the dropdown does not be in one position.
How I want it:
How it's showing in mine:
when opening the dropdown
So basically the dropdown showing in the center of it's field rather than showing below it. I did my research and seen it is know to be default setting (to dropdown be below it's field) but not happening in my case.
Code fo the dropdown
<div className="row-5" style={{ marginTop: "21px" }}>
<div className="repeat">
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="repeat-id">Repeat</InputLabel>
<Select
style={{ width: '420px' }}
labelId="repeat-id"
id="demo-simple-select-standard"
// value={age}
// onChange={handleChange}
label="Repeat"
defaultValue="Never"
>
<MenuItem value="Never">
Never
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
</div>
you must import the Select component from here :
import FormControl from '#mui/material/FormControl';
import Select from '#mui/material/Select';
that works for me very well.
How to keep a label position like T.M.T SKEP, if the default value is not set? I am using material UI.
import TextField from '#material-ui/core/TextField';
<TextField
fullWidth
label="T.M.T"
id="tmt"
name="tmt"
type="date"
value=""
variant="outlined"
/>
Add this property in the TextField.
InputLabelProps={{
shrink: true
}}
<TextField
fullWidth
label="T.M.T"
id="tmt"
name="tmt"
type="date"
value=""
variant="outlined"
InputLabelProps={{
shrink: true
}}
/>
https://codesandbox.io/s/material-demo-forked-swew3?file=/demo.js
This works fine with a text field:
<TextField id="txtNick" paddingLeft='15' top='10' maxLength='20' width = '300' />
However the following code does not work in a text area:
<TextArea id="txtAbout" maxLength='250' paddingRight='10' top='10' width = '300' borderStyle="Ti.UI.INPUT_BORDERSTYLE_ROUNDED"/>
Any idea how to achieve padding? Cheers
You can't with single TextArea. but you can:
<View height="Ti.UI.SIZE">
<TextArea left="10 right="10" />
</View>