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>
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 have a form which needs its css Display to be set to block when I click on a certain button. When I click on the Add button id="add" it should set the css style block for id="modalContent" div.
I've just started react and am completely new to it. I read something about ref but couldn't completely understand how to go through with it.
AddFormMod.tsx
import React from 'react';
import './App.css';
function AddForm(){
return (
<div id="modalContent" className="modal-content">
<h1 id="headerAdd">ADD NEW CONTACT</h1>
<form action="#" id="myForm">
<label className="required label" ><b>Name: </b></label><br />
<input className="form-fields type1" type="text" id="name" name="name" required></input><br/><br/>
<label className="required label" ><b>Email:</b> </label><br/>
<input className="form-fields type1 " type="email" id="email" name="mail" required></input><br/><br/>
<label className="required label" ><b>Mobile:</b> </label>
<label className="label" id="landlinelabel" ><b>Landline:</b></label><br/>
<input className="form-fields" type="tel" id="mobile" name="mobile" pattern="^\d{10}$" required></input>
<input className="form-fields" type="tel" id="landline" name="landline" ></input><br/><br/>
<label className="label" ><b>Website</b></label><br/>
<input className="form-fields type1" type="text" id="website" name="website" ></input><br/><br/>
<label className="label"><b>Address:</b> </label><br/>
<textarea className="addressstyle form-fields" id="address1" name="address1" rows={9} cols={74}></textarea>
<input className = "buttonstyle" type="submit" value="Add" id="adddetails" ></input>
<input className = "buttonstyle" type="button" value="Cancel" id="candetails"></input>
</form>
</div>
);
}
export default AddForm;
App.tsx
import React from 'react';
import './App.css';
import AddForm from './AddFormMod';
function App() {
return (
<p id="title"> Address Book </p>
);
}
function AddHome(){
return (
<div>
<button id="home" >HOME</button>
<button id="add" onClick={} >+ADD</button>
</div>
);
}
function ContactBar(){
return (
<div>
<p id="contacts">CONTACTS</p>
</div>
);
}
export { App , AddHome, ContactBar };
One approach to achieve the result you want, is to utilize conditional rendering. For example, when you click the "add"-button in your AddHome component, you can set a state variable to render the AddForm-component:
function AddHome(){
const [shouldRenderForm, setShouldRenderForm] = useState(false);
return (
<div>
<button id="home" >HOME</button>
<button id="add" onClick={() => setShouldRenderForm(true)} >+ADD</button>
{shouldRenderForm && <AddForm />}
</div>
);
}
I'm also guessing you want to "close the form" after submit or via a close button inside the AddForm-component. To achieve this, simply pass a prop to the component, for the AddForm-component to call to close the form:
// ... in the add AddHome component:
{shouldRenderForm && <AddForm closeForm={() => setShouldRenderForm(false)} />}
// ... in AddForm component:
type AddFormProps = { closeForm: () => void };
function AddForm({ closeForm }: AddFormProps) {
// ... i.e. on a button to close the form
<button type="button" onClick={() => closeForm()}>Cancel</button>
}
Checkout a working example in this sandbox.
I'm trying to make a twitter like app for memes, with basic functions like posting, commenting and like count. Also note that I'm using firebase firestore as my database. i would like that every time the like count updates in the database, the observable array item value updates as well and be visible live in UI
snippet of JS file, this populates the listview with 15 posts
const MemeCollection = firestore.firestore().collection("memes");
const query = MemeCollection.orderBy("createdAt","desc");
function onLoaded(args) {
var page = args.object;
page.bindingContext = {posts: ObsArray};
query.get().then(querySnapshot => {
querySnapshot.forEach(doc => {
var duplicate = 0;
var post_id = JSON.parse(JSON.stringify(doc.id));
ObsArray.forEach((item) => {
//checks if post is duplicate
if (item.id === post_id){
duplicate += 1
console.log("Duplicate")
} else {
}
});
if (duplicate == 0) {
firebase.getValue('/users/'+ JSON.parse(JSON.stringify(doc.data().uid)) +'/profpic')
.then(result => global.profPic = JSON.parse(JSON.stringify(result.value)))
.catch(error => console.log("Error: " + error));
console.log(profPic);
console.log(parseInt(doc.data().likes));
ObsArray.push({id: JSON.parse(JSON.stringify(doc.id)),"profPic": profPic, "fromWho": JSON.parse(JSON.stringify(doc.data().fromWho)), "title": JSON.parse(JSON.stringify(doc.data().title)), "myImage": JSON.parse(JSON.stringify(doc.data().imgsrc)), "date": JSON.parse(JSON.stringify(doc.data().date)), "likeCount": parseInt(doc.data().likes)});
console.log(" NotDuplicate")
};
});
});
}
and the XML file
<lv:RadListView items="{{ posts }}" id="postlist" pullToRefresh="true" pullToRefreshInitiated="pullToRefreshInitiated" itemTap="itemTapped">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical" marginBottom="3" />
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate itemTap="itemTapped">
<StackLayout backgroundColor="white">
<GridLayout rows="50,auto, auto, auto" columns="auto, *, *,*" class="layout">
<image src="{{ profPic }}" class="prof-pic" rowSpan="2" col="0" />
<label text="{{ fromWho }}" class="info_fromWho" textWrap="true" row="0" col="1" colSpan="3" />
<label text="{{ date }}" class="info_date" textWrap="true" row="0" col="1" colSpan="3" />
<label text="{{ title }}" class="info info_advtitle" textWrap="true" row="1" col="1" colSpan="3" />
<!--<label text="{{ message }}" class="info info_advdesc" textWrap="true" row="2" col="1" />-->
<image id="adv-img" visibility="{{ visibility }}" ngIf ="myImage" src="{{ myImage }}" class="imgs" textWrap="true" row="2" col="1" colSpan="3" stretch="aspectFill" tap="ImageTap" />
<label text="" class="fa info clear-btn white" row="3" col="1" colSpan="1" />
<label text="0" class="fa like_count clear-btn white" row="3" col="1" colSpan="1" />
<label text="" class="fa info clear-btn white" row="3" col="2" colSpan="1" tap="likeTap" meme_id="{{ id }}" />
<label text="{{ likeCount }}" class="fa like_count clear-btn white" row="3" col="2" colSpan="1" />
</GridLayout>
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
I tried using this code inside the duplicate checker but doesn't seem to work:
MemeCollection.doc(post_id).onSnapshot(doc => {
if (doc.exists) {
item.likeCount = doc.data().likes;
}
})
is there any way I could possibly edit/update the likeCount item value in ObservableArray whenever there are changes in like count in the database and feed it live in UI?
I have a strange problem with my form. I can add and remove fields with two several buttons, but the remove button has stopped working. I can see that on clicking still the action "##redux-form/ARRAY_REMOVE" gets fired, but the field does not disappear. I don't really know why it stopped working, I tried to undo all the code I wrote afterwards, but wasn't able to track the error down. Would appreciate any input. Here is my code:
import React from 'react';
import TextField from 'material-ui/TextField';
import { Field, FieldArray, reduxForm} from 'redux-form';
import validate from './validate';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin(); //Needed, otherwise an error message is shown in the console
const renderTextField = ({input, label, meta: {touched, error}, ...custom}) => (
<TextField
hintText={label}
floatingLabelText={label}
errorText={touched && error}
{...input}
{...custom}
/>
);
const renderUsers = ({fields, meta: { touched, error }}) => (
<div>
<div>
<button className="btn btn-primary"
type="button" onClick={() => fields.push({})}>
<span className="glyphicon glyphicon-plus-sign"/> Add User
</button>
{touched && error && <span>{error}</span>}
</div>
{fields.map((index) =>
<div key={index}>
<Field name={`${index}.firstName`} component={renderTextField} label="First Name"/>
<Field name={`${index}.lastName`} component={renderTextField} label="Last Name"/>
<Field name={`${index}.position`} component={renderTextField} label="Position"/>
<Field name={`${index}.email`} component={renderTextField} label="Email"/>
<button className="btn btn-xs btn-danger"
type="button"
title="Remove User"
onClick={() => fields.remove(index)}>
<span className="glyphicon glyphicon-minus-sign"/>
</button>
</div>
)}
</div>
);
const UserCreation = (props) => {
const { handleSubmit, pristine, reset, submitting} = props;
return (
<form onSubmit={handleSubmit}>
<FieldArray name="users" component={renderUsers}/>
<div>
<button className="btn btn-primary btn-success"
type="submit"
disabled={pristine || submitting}>
<span className="glyphicon glyphicon-send" />
Submit
</button>
{' '}
<button type="button"
className="btn btn-primary btn-danger"
disabled={ pristine || submitting}
onClick={reset}>
Cancel
</button>
</div>
</form>
);
}
export default reduxForm({
form: 'UserCreationForm',
validate
})(UserCreation);
Here is a snapshot from my console when I try to remove the field:
console.log of action
I fixed it. I added a second key to the map function:
{fields.map((user, index) =>
<div key={index}>
<Field name={`${user}.firstName`} component={renderTextField} label="First Name"/>
<Field name={`${user}.lastName`} component={renderTextField} label="Last Name"/>
<Field name={`${user}.position`} component={renderTextField} label="Position"/>
<Field name={`${user}.email`} component={renderTextField} label="Email"/>