React09 – Forms with components
import { useState } from 'react';
function Form2() {
const [name, setName] = useState("");
const [area, setArea] = useState("");
//const [inputs, setInputs] = useState({});
const [inputs, setInputs] = useState({
firstname: 'John',
tomato: true,
onion: false
});
const [selectedFruit, setSelectedFruit] = useState('banana');
const handleChangeOpciones = (e) => {
const target = e.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmitOpciones = (event) => {
let fillings = '';
if (inputs.tomato) fillings += 'tomato';
if (inputs.onion) {
if (inputs.tomato) fillings += ' and ';
fillings += 'onion';
}
if (fillings == '') fillings = 'no fillings';
alert(`${inputs.firstname} wants a burger with ${fillings}`);
alert(`Your favorite fruit is: ${selectedFruit}`);
event.preventDefault();
};
const handleChangeInputs = (e) => {
const name = e.target.name;
const value = e.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleChangeRadio = (e) =>{
setSelectedFruit(e.target.value);
}
function handleChange(e) {
setName(e.target.value);
}
function handleChangeArea(e){
setArea(e.target.value);
}
function handleSubmit(e) {
e.preventDefault();
alert(name);
}
return (
<form onSubmit={handleSubmitOpciones}>
<label>Enter your name:
<input autoFocus
type="text"
value={name}
onChange={handleChange}
/>
<br/>
</label>
<hr/>
<label>Write here:
<br/>
<textarea
value={area}
onChange={handleChangeArea}
/>
</label>
<p>Current value: {area}</p>
<hr/>
<label>My name is:
<input
type="text"
name="firstname"
value={inputs.firstname}
onChange={handleChangeOpciones}
/>
</label>
<p>I want a burger with:</p>
<label>Tomato:
<input
type="checkbox"
name="tomato"
checked={inputs.tomato}
onChange={handleChangeOpciones}
/>
</label>
<label>Onion:
<input
type="checkbox"
name="onion"
checked={inputs.onion}
onChange={handleChangeOpciones}
/>
</label>
<p>Current values: {inputs.firstname} </p>
<p>Select your favorite fruit:</p>
<label>
<input
type="radio"
name="fruit"
value="apple"
checked={selectedFruit === 'apple'}
onChange={handleChangeRadio}
/> Apple
</label>
<br />
<label>
<input
type="radio"
name="fruit"
value="banana"
checked={selectedFruit === 'banana'}
onChange={handleChangeRadio}
/> Banana
</label>
<br />
<label>
<input
type="radio"
name="fruit"
value="cherry"
checked={selectedFruit === 'cherry'}
onChange={handleChangeRadio}
/> Cherry
</label>
<br />
<input type="submit" />
</form>
)
}
export default Form2;