function App() {
const txtTitle = useRef();
const txtColor = useRef();
const submit = (e) => {
e.preventDefault();
const title = txtTitle.current.value;
const color = txtColor.current.value;
alert(`${title}, ${color}`);
txtTitle.current.value = '';
txtColor.current.value = '#115566';
}
return (
<div className="App">
<form onSubmit={submit}>
<input
type="text"
placeholder='color title'
ref={txtTitle}
/>
<input
type='color'
ref={txtColor}
/>
<button>Add</button>
</form>
</div>
);
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter