Using custom hook to manage form
Fri Jun 17 2022 10:00:28 GMT+0000 (Coordinated Universal Time)
Saved by
@patdevwork
import './App.css';
import { useState, } from 'react';
function useInput(initialValue) {
const [value, setValue] = useState(initialValue);
return [
{ value,
onChange: e => setValue(e.target.value) },
() => setValue(initialValue)
];
}
function App() {
const [titleProps, setTitle] = useInput("");
const [colorProps, setColor] = useInput("#112596");
const submit = (e) => {
e.preventDefault();
alert(`${titleProps.value}, ${colorProps.value}`);
setColor('#256987"');
setTitle('');
}
return (
<div className="App">
<form onSubmit={submit}>
<input
{...titleProps}
type="text"
placeholder='color title'
/>
<input
{...colorProps}
type='color'
/>
<button>Add</button>
</form>
</div>
);
}
export default App;
content_copyCOPY
Comments