I have a controlled form containing an address object.
const [formData, setFormData] = useReducer(formReducer, {
name: "",
address: { addressLine1: "", city: "", state: "", zip: "" },
phone: "",
contact: "",
});
const formReducer = (state, event) => {
return {
...state,
[event.name]: event.value,
};
};
Updating a form input triggers a handler function.
<input
className={style.bodylessInput}
placeholder=" "
type="text"
maxLength={30}
name="name"
value={formData.name}
onChange={handleChange}
/>
function handleChange(event) {
setFormData({
name: event.target.name,
value: event.target.value,
});
}
I am struggling to update the address fields. Using an input with name="addressLine1" will add a property to the form object rather than update the address.
Any advice on how I can update the address object inside my form object would be appreciated.
You can do as below. input name be like address.addressLine1
function formReducer(state, event) {
if(event.name.startsWith("address") && event.name.split(".").length > 1){
var updateField = event.name.split(".")[1];
return{
...state,
address:
{...state.address, [updateField] : event.value}
}
}
return {
...state,
[event.name]: event.value,
};
}
input:
<input
type="text"
maxLength={30}
name="address.addressLine1"
value={formData.address.addressLine1}
onChange={handleChange}
/>
Related
I want that when i submit my form one i get a form submitted successfully message but when i submit my form it directly submits no message comes you have submitted your form successfully can someone tell me what to do or what i am doing wrong. and if possible on a side note can you tell me how to use the button to navigate to other page when i try that i am directly naviagted to home page.
Code :
const Account2 = () => {
const [menu, setMenu] = useState([])
const [form, setForm] = useState({
kookid: "",
kookname: "",
name: "",
cuisine: "",
foodtype: "",
spicylevel: "",
servings: "",
price: "",
description: "",
})
const menuCollectionRef = collection(db, "menu")
useEffect(() => {
onSnapshot(menuCollectionRef, snapshot => {
setMenu(snapshot.docs.map(doc => {
return {
id: doc.id,
viewing: false,
...doc.data()
}
}))
})
}, [])
const handleSubmit = e => {
e.preventDefault()
if (
!form.kookid ||
!form.kookname ||
!form.name ||
!form.cuisine ||
!form.foodtype ||
!form.spicylevel ||
!form.servings ||
!form.price ||
!form.description
) {
alert("Please fill out all fields")
return
alert("Form Submitted Successfully")
}
addDoc(menuCollectionRef, form)
setForm({
kookid: "",
kookname: "",
name: "",
cuisine: "",
foodtype: "",
spicylevel: "",
servings: "",
price: "",
description: "",
}).then(() => {
})
}
return (
<form onSubmit={handleSubmit}>
<div className="form-group2">
<label>Kook Id</label>
<input
type="text"
placeholder=""
value={form.kookid}
onChange={e => setForm({ ...form, kookid: e.target.value })} />
</div>
<div className="form-group2">
<label>Description</label>
<textarea
placeholder=""
value={form.description}
onChange={e => setForm({ ...form, description: e.target.value })} />
</div>
<center> <div className="buttons2">
<button type="submit">Submit</button>
</div></center>
</form>
</div></>
how can I set value from text Input to option[0].title when user input? I tried in many way and get error. Please help me to fix this issue.
const [options, setOptions] = useState({
0: {
title: "",
},
2: {
title: "",
1: {
title: "",
}, },
3: {
title: "",
},
title: "", });
let name, value;
const handleChange = (e) => {
name = e.target.name;
value = e.target.value;
setOptions({ ...options, [name]: value }); };
return ( <TextInput
type="text"
name="0"
value={options[0].title}
onChange={handleChange}
required
placeholder="something"
icon="check_box_outline_blank"
/> )
you just have to edit the title in the object:
const handleChange = (e) => {
name = e.target.name;
value = e.target.value;
setOptions({ ...options, [name]: { title: value } });
};
and if you need the previous information from the targeted name, spread within that object too:
setOptions({ ...options, [name]: { ...options[name], title: value } });
Fully working code,
const [options, setOptions] = useState({
0: { title: "" },
2: {
title: "",
1: { title: "" },
},
3: { title: "" },
title: "",
});
const handleChange = (e) => {
const { name, value } = e.target;
options[+name].title = value;
setOptions({...options});
};
return (
<>
<input
type="text"
name="0"
value={options[0].title}
onChange={handleChange}
required
placeholder="something"
icon="check_box_outline_blank"
/>
<input
type="text"
name="2"
value={options[2].title}
onChange={handleChange}
required
placeholder="something"
icon="check_box_outline_blank"
/>
</>
);
I tried to check this on codesandbox and found a solution -
The name that you have updated here is string and the json has number keys. Which was the reason why it wouldn't update on title node. Also you never said .title = value, which is why values got directly updated to the options[0] element
export default function App() {
const [options, setOptions] = useState({
0: {
title: ""
},
2: {
title: "",
1: {
title: ""
}
},
3: {
title: ""
},
title: ""
});
const handleChange = (e) => {
const name = e.target.name,
value = e.target.value;
let updatedOptions = { ...options };
updatedOptions[Number(name)].title = value;
setOptions(updatedOptions);
};
return (
<div className="App">
<input
type="text"
name="0"
value={options[0].title}
onChange={handleChange}
required
placeholder="something"
icon="check_box_outline_blank"
/>
</div>
);
}
I have an input that looks like
<input name="data.company.name" value="Bob's Burgers" />
and on it's onChange I'd like to update the state with it's name.
<input name="data.company.name" value="Bob's Burgers" onChange={(e) => this.setState({ [e.name]: e.target.value}) />
But when I do this the state looks like
this.state = {
data: { company: { name: '' } },
data.company.name: "Bob's Burgers"
}
How can I achieve passing the name to the state so I end up with
this.state = {
data: { company: { name: "Bob's Burgers" } }
}
I cannot alter the name of the input as it's set via a Field Component.
If you don't mind adding lodash to your project you could do this:
<input
name="data.company.name"
value="Bob's Burgers"
onChange={e =>
e.persist();
this.setState(prevState => {
return _.setWith(_.clone(prevState), e.name, e.target.value, _.clone);
});
}
/>;
I am trying to re render a component when a prop changes. My component uses a custom hook which holds the state of a form. In useEffect whenever the prop called refresh changes I want to re render the page. I have tried countless solutions including making a forceUpdate function and calling it when the prop changes, I tried changing state so that the component should re render, but the information in my for does not clear. Below is my code.
Component:
const CustomerInformationForm = (props) => {
const [triggerRefresh, setTriggerRefresh] = useState();
const initialState = {
name: {
value: "",
isValid: false,
},
phone: {
value: "",
isValid: false,
},
address: {
value: "",
isValid: true,
},
};
const initialValidity = false;
useEffect(() => {
console.log("customerinfo refreshing");
setTriggerRefresh(props.refresh);
}, [props.refresh]);
let [formState, inputHandler] = useForm(
initialState,
initialValidity
);
return (
<div>
<h3>Customer Information</h3>
<form className="customer-information_form">
<Input
id="name"
label="Name"
type="text"
element="input"
validators={[VALIDATOR_REQUIRE()]}
errorText="Please enter a valid name."
onInput={inputHandler}
onChange={props.customerInfo(formState)}
/>
<Input
type="text"
element="input"
id="phone"
label="Phone"
validators={[VALIDATOR_MINLENGTH(8)]}
errorText="Please enter a valid phone number."
onInput={inputHandler}
onChange={props.customerInfo(formState)}
/>
<Input
type="text"
element="input"
id="address"
label="Address"
validators={[]}
onInput={inputHandler}
onChange={props.customerInfo(formState)}
/>
</form>
</div>
);
};
export default CustomerInformationForm;
Custom hook:
import { useCallback, useReducer } from "react";
const formReducer = (state, action) => {
switch (action.type) {
case "INPUT_CHANGE":
let formIsValid = true;
for (const inputId in state.inputs) {
if (!state.inputs[inputId]) {
continue;
}
if (inputId === action.inputId) {
formIsValid = formIsValid && action.isValid;
} else {
formIsValid = formIsValid && state.inputs[inputId].isValid;
}
}
return {
...state,
inputs: {
...state.inputs,
[action.inputId]: { value: action.value, isValid: action.isValid },
},
isValid: formIsValid,
};
case "SET_DATA":
return {
inputs: action.inputs,
isValid: action.formIsValid,
};
default:
return state;
}
};
export const useForm = (initialInputs, initialValidity) => {
const [formState, dispatch] = useReducer(formReducer, {
inputs: initialInputs,
isValid: initialValidity,
});
const inputHandler = useCallback((id, value, isValid) => {
dispatch({
type: "INPUT_CHANGE",
value: value,
isValid: isValid,
inputId: id,
});
}, []);
const setFormData = useCallback((inputData, formValidity) => {
dispatch({
type: "SET_DATA",
inputs: inputData,
formIsValid: formValidity,
});
}, []);
return [formState, inputHandler, setFormData,];
};
Any solutions as to what I could do to get the form to re render empty??
I think the best way is to use the setFormData method returned by your hook (you have omitted it in your CustomerInformationForm component).
Then you can call it in the form, when some condition is met in an effect:
const initialState = useRef({
name: {
value: "",
isValid: false,
},
phone: {
value: "",
isValid: false,
},
address: {
value: "",
isValid: true,
},
});
let [formState, inputHandler, setFormData] = useForm(
initialState,
initialValidity
);
useEffect(() => {
console.log("customerinfo refreshing");
setTriggerRefresh(props.refresh);
setFormData(initialState.current);
}, [props.refresh]);
You can also store the initialState value with useRef, to avoid re-running the effect unnecessarily.
The input field displays the value saved in local storage, but I can't edit the value in the input field and I don't know why.
I don't want to use a placeholder as I want to be able to edit the values.
import React, { useRef, useState } from 'react';
const ProfileComponent: React.FC = () => {
let email = useRef<HTMLInputElement>(null);
const saveEmail = () => {
localStorage.setItem('email', email)
}
// tslint:disable-next-line: no-any
const update = (event: any) => {
if (event.target.name === 'email') {
setState({ ...state, email: event.target.value });
} else if (event.target.name === 'fullName') {
setState({ ...state, fullName: event.target.value });
}
};
interface StateInterface {
email: string;
}
const [state, setState] = useState<StateInterface>({
email: localStorage.getItem('email') || '',
});
return (
<input type='text' name='fullName' ref={fullName} onChange={update} value={state.fullName} />
<input type='text' name='email' ref={email} onChange={update} value={state.email} />
<button onClick={saveEmail}></button>
)
}
There are a few issues with the code you have provided
1) You should wrap the DOM elements with React Fragments (<> </>)
2) Instead of setting the type of event as any, you might want to use React.FormEvent<HTMLInputElement>.
3) You should use localStorage.setItem('email', state.email) instead of localStorage.setItem('email', email), since email is a property as part of the state object, thus you will have to reference it in order to access the values.
Here are the full changes below:
interface StateInterface {
email: string;
fullName: string;
}
const ProfileComponent: React.FC = () => {
let email = useRef<HTMLInputElement>(null);
let fullName = useRef<HTMLInputElement>(null);
const [state, setState] = useState<StateInterface>({
email: 'aa#gmail.com' || '',
fullName: 'aa' || '',
});
const saveEmail = () => {
localStorage.setItem('email', state.email)
console.log(state);
}
const update = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.name === 'email') {
setState({ ...state, email: event.target.value });
} else if (event.target.name === 'fullName') {
setState({ ...state, fullName: event.target.value });
}
};
return <>
<input type='text' name='fullName' ref={fullName} onChange={update} value={state.fullName} />
<input type='text' name='email' ref={email} onChange={update} value={state.email} />
<button onClick={saveEmail}>save</button>
</>
}
You have to have an onChange in your input
return (
<input type='text' name='email' ref={email} onChange={e => setState({email: e.target.value})}
value= {state.email} />
<button onClick={saveEmail}></button>
)