I'm new to Material Ui, currently trying to implement their SELECT component, but it is opening in row instead of column. Do I miss something?
const SelectDropDownComponent = ({ options }) => {
const classes = useStyles();
const [age, setAge] = React.useState("");
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div>
<FormControl className={classes.formControl}>
<Select
value={age}
onChange={handleChange}
displayEmpty
className={classes.selectEmpty}
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
};
Select on close
Select on open
Related
So basically I have a form which i have tried to style somewhat like material Ui.But I would Like to add some date and time pickers.But im getting this error
Module not found: Can't resolve '#mui/x-date-pickers/AdapterDayjs' in '/Users/arundhati/Development/code/Mod5/capstone/client/src/components'
Also there is like lot of weird stuff given in the MUI document .And im confused how i can implement date and time picker here is my code.Thanks :)
function EditReservationForm({ reservation, onUpdateReservation }) {
const { name, date, time, num, contact, occasion } = reservation;
const [updateName, setUpdatedName] = useState(name);
const [updateDate, setUpdatedDate] = useState(date);
const [updateTime, setUpdatedTime] = useState(time);
const [updateNum, setUpdatedNum] = useState(num);
const [updateContact, setUpdatedContact] = useState(contact);
const [updateOccasion, setUpdatedOccasion] = useState(occasion);
function handleEditClick(e) {
e.preventDefault();
fetch(`/reservations/${reservation.id}`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: updateName,
date: updateDate,
time: updateTime,
num: updateNum,
contact: updateContact,
occasion: updateOccasion,
}),
})
.then((r) => r.json())
.then((updatedReservation) => {
onUpdateReservation(updatedReservation);
});
}
return (
<>
<Box
component="form"
sx={{
"& > :not(style)": { m: 1 },
}}
noValidate
autoComplete="off"
onSubmit={handleEditClick}
>
<h2>Modify Reservation</h2>
{/* <form onSubmit={handleEditClick} > */}
<FormControl>
<InputLabel htmlFor="component-outlined">Name</InputLabel>
<OutlinedInput
type="text"
// id="email"
id="email"
value={updateName}
onChange={(e) => setUpdatedName(e.target.value)}
label="Name"
/>
</FormControl>
<br />
<FormControl>
<InputLabel htmlFor="component-outlined">Date</InputLabel>
<OutlinedInput
type="date"
// id="email"
id="date"
value={updateDate}
onChange={(e) => setUpdatedDate(e.target.value)}
label="Date"
/>
</FormControl>
<br />
<FormControl>
<InputLabel htmlFor="component-outlined">Time</InputLabel>
<OutlinedInput
type="time"
name="time"
id="time"
value={updateTime}
onChange={(e) => setUpdatedTime(e.target.value)}
/>
</FormControl>
<br />
<FormControl>
<InputLabel htmlFor="component-outlined">No. of Guests</InputLabel>
<OutlinedInput
type="number"
name="num"
value={updateNum}
onChange={(e) => setUpdatedNum(e.target.value)}
/>
</FormControl>
<br />
<FormControl>
<InputLabel htmlFor="component-outlined">Contact</InputLabel>
<OutlinedInput
type="tel"
name="contact"
value={updateContact}
onChange={(e) => setUpdatedContact(e.target.value)}
placeholder="contact"
/>
</FormControl>
<br />
<FormControl>
<InputLabel htmlFor="component-outlined">Occasion</InputLabel>
<OutlinedInput
type="text"
name="occasion"
value={updateOccasion}
onChange={(e) => setUpdatedOccasion(e.target.value)}
/>
</FormControl>
<Stack paddingLeft={15} direction="row" id="loginbutton">
<ColorButton variant="contained" type="submit">
{" "}
Update Reservation
</ColorButton>
</Stack>
{/* </form> */}
</Box>
</>
);
}
export default EditReservationForm;
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 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.
I have successfully selected a radio button. My problem is I want to include the selection with the label also. The labels/words should be clickable also.
Here's my codesandbox
CLICK HERE
<RadioButton
label="Food"
name="radio"
value="optionA"
checked={select === "optionA"}
handleChange={(event) => handleSelectChange(event)}
/>
<RadioButton
label="Water"
name="radio"
value="optionB"
checked={select === "optionB"}
handleChange={(event) => handleSelectChange(event)}
/>
Just custome like this: https://codesandbox.io/s/react-styled-components-radio-button-forked-efxzd?file=/src/Radio.js:1554-1613
In the App:
const handleSelectChange = (value) => {
setSelect(value);
};
<RadioButton
handleChange={handleSelectChange}
/>
And in the RadioButton:
const handleChecked = () => {
handleChange(value);
};
<Item onClick={handleChecked}>
just include the radio button inside <label> tag
<label>
<RadioButton
label="Food"
name="radio"
value="optionA"
checked={select === "optionA"}
handleChange={(event) => handleSelectChange(event)}
/>
</label>
<label>
<RadioButton
label="Water"
name="radio"
value="optionB"
checked={select === "optionB"}
handleChange={(event) => handleSelectChange(event)}
/>
</label>
I have a component that successfully uses redux-form onSubmit to call an action creator. The creator performs an ajax call but the the action is never dispatched to save it to the store. I must have something messed up in the wiring of react-redux and redux-form, possibly in the binding of the action creator. I have read everything that I have found on Google and still can't find the problem. Any ideas? ( I have included redux-promise to handle the request promise, but it never makes it that far )
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import validate from '../utils/add_person_validation';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { addPersonResponseAction } from '../actions/index';
import renderField from '../components/render_input_field';
// call the action creator - this part succeeds
const doSubmit = function(values) {
addPersonResponseAction(values);
};
let AddPersonContainer = (props) => {
const {
handleSubmit,
pristine,
reset,
submitting
} = props;
return (
<div className="row">
<form onSubmit={handleSubmit(doSubmit)} >
<div className="col-sm-6">
<fieldset>
<legend>Person Info</legend>
<div className="form-group">
<Field name="personFirstName" component={renderField} type="text" label="First Name" className="form-control" />
<Field name="personLastName" component={renderField} type="text" label="Last Name" className="form-control" />
<Field name="birthday" component={renderField} type="date" label="Birthday" className="form-control" />
<Field name="group" component={renderField} type="text" label="Group" className="form-control" />
</div>
</fieldset>
</div>
<div className="form-buttons-container">
<button className="btn btn-default form-button" type="submit" disabled={pristine || submitting}>Submit</button>
<button className="btn btn-default form-button" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
</div>
);
};
const mapStateToProps = function({ addPersonResponse }) {
return { addPersonResponse };
};
const mapDispatchToProps = function(dispatch) {
return bindActionCreators( {addPersonResponseAction}, dispatch);
};
const form = reduxForm({ form: 'addPerson', validate: validate });
AddPersonContainer = connect(mapStateToProps, mapDispatchToProps)(form(AddPersonContainer));
export default AddPersonContainer;
/********************************************
* Action creator
**********************************************/
import axios from 'axios';
export const ADD_PERSON_RESPONSE = 'ADD_PERSON_RESPONSE';
export const addPersonResponseAction = (data) => {
const postURL = 'http://some-url/addperson';
const request = axios.post(postURL, { data });
return {
type: ADD_PERSON_RESPONSE,
payload: request
};
};
Redux wraps actions using mapDispatchToProps - but you are calling the unwrapped version by using the imported method.
// call the action creator - this part succeeds
const doSubmit = function(values) {
addPersonResponseAction(values); <------ Redux does not know anything about this
};
Try:
let AddPersonContainer = (props) => {
const {
handleSubmit,
pristine,
reset,
submitting
} = props;
const doSubmit = function(values) {
props.addPersonResponseAction(values); <----- Try this
}
return (
<div className="row">
<form onSubmit={handleSubmit(doSubmit)} >
<div className="col-sm-6">
<fieldset>
<legend>Person Info</legend>
<div className="form-group">
<Field name="personFirstName" component={renderField} type="text" label="First Name" className="form-control" />
<Field name="personLastName" component={renderField} type="text" label="Last Name" className="form-control" />
<Field name="birthday" component={renderField} type="date" label="Birthday" className="form-control" />
<Field name="group" component={renderField} type="text" label="Group" className="form-control" />
</div>
</fieldset>
</div>
<div className="form-buttons-container">
<button className="btn btn-default form-button" type="submit" disabled={pristine || submitting}>Submit</button>
<button className="btn btn-default form-button" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
</div>
);
};
Because the function you are defining does not have access to props this gives a bit of a twist, so try refactoring it into the component definition.
This is a source of confusion because it is required to import the function so mapDispatchToProps can wrap it...but there is temptation to forget that the real action is in props, not the function itself. So I'm sure you are seeing results in the actual action function, but redux does not know because it is not wrapped in dispatch.