Created
June 6, 2019 17:04
-
-
Save sienki-jenki/e0b13710fec0cbaeaac528672c7c3b90 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* HTML */ | |
import React from 'react'; | |
import './styles/form.scss'; | |
import useSignUpForm from './hooks/customHooks.jsx'; | |
const Form = () => { | |
const {inputs, handleInputChange, handleSubmit} = useSignUpForm(); | |
return ( | |
<React.Fragment> | |
<div className="formWrapper"> | |
<h1 className="header">Form</h1> | |
<form onSubmit={handleSubmit}> | |
<div className="form-group"> | |
<label htmlFor="nicknameInput">Nickname</label> | |
<input type="text" id="nicknameInput" name="nickname" onChange={handleInputChange} | |
value={inputs.nickname} required/> | |
<label htmlFor="emailInput">Email Address</label> | |
<input type="text" id="emailInput" name="email" onChange={handleInputChange} | |
value={inputs.email} required/> | |
<label htmlFor="lastName">Last Name</label> | |
<input type="text" id="lastName" name="lastName" onChange={handleInputChange} | |
value={inputs.lastName} required/> | |
</div> | |
<button type="submit" className="btn btn-primary">Submit</button> | |
</form> | |
</div> | |
</React.Fragment> | |
) | |
}; | |
export default Form; | |
/* HOOKS */ | |
import React, {useState} from 'react'; | |
const useSignUpForm = (callback) => { | |
const [inputs, setInputs] = useState({}); | |
console.log(inputs); | |
const handleSubmit = (event) => { | |
if (event) { | |
event.preventDefault(); | |
} | |
}; | |
const handleInputChange = (event) => { | |
event.persist(); | |
setInputs(inputs => ({ | |
...inputs, [event.target.name]: event.target.value | |
}) | |
); | |
}; | |
return { | |
handleSubmit, | |
handleInputChange, | |
inputs | |
}; | |
}; | |
export default useSignUpForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment