msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

day_12 has been cleaned

Browse Source
pull/64/head
asabeneh 5 years ago
parent 8918cb7e75
commit f01e696377
2 changed files with 458 additions and 441 deletions
Show Stats Download Patch File Download Diff File

80
12_Day_Forms/12_forms.md
Unescape View File

@ -19,7 +19,7 @@
![30 Days of React banner](../images/30_days_of_react_banner_day_12.jpg) ![30 Days of React banner](../images/30_days_of_react_banner_day_12.jpg)
- [Forms](#forms) - [Forms](#forms)
- [Getting data from input field](#getting-data-from-input-field) - [Getting data from an input field](#getting-data-from-an-input-field)
- [Getting multiple input data from form](#getting-multiple-input-data-from-form) - [Getting multiple input data from form](#getting-multiple-input-data-from-form)
- [Get data from different input field types](#get-data-from-different-input-field-types) - [Get data from different input field types](#get-data-from-different-input-field-types)
- [Form Validation](#form-validation) - [Form Validation](#form-validation)
@ -33,7 +33,7 @@
# Forms # Forms
Form is used to collect data from user. Once in a while we use form to fill our information on a paper or on a website. Either to sign up, sign in or to apply for a job we fill different form fields to submit data to remote database. We encounter different form fields when we fill a form such as simple text, email, password, telephone, date, checkbox, radio button, option selection and text area field. Currently, HTML5 has provide quite a lot of field types. You may have Form is used to collect data from a user. Once in a while we use form to fill our information on a paper or on a website. Either to sign up, sign in or to apply for a job we fill different form fields to submit our data to remote database. We encounter different form fields when we fill a form such as simple text, email, password, telephone, date, checkbox, radio button, option selection and text area field. Currently, HTML5 has provide quite a lot of field types. You may have a look at the following available HTML5 input types.
```html ```html
<input type="text" /> <input type="text" />
@ -67,7 +67,7 @@ Form is used to collect data from user. Once in a while we use form to fill our
<input type="button" /> <input type="button" />
``` ```
Another HTML fields to get data from form are textarea and options. Another HTML fields to get data from a form are textarea and select with options elements.
```html ```html
<textarea>Please write your comment ...</textarea> <textarea>Please write your comment ...</textarea>
@ -82,9 +82,9 @@ Another HTML fields to get data from form are textarea and options.
</select> </select>
``` ```
Now, you know most of fields we need to get data from a form. Let's start with an input of type text field. In the previous day, we saw different types of events and today we will focus on more of _onChange_ event type which triggers whenever an input field data changes. Input field has by default a memory to store input data but in this section we control that using state and we implement a controlled input. Today we will implement a controlled input. We will cover uncontrolled input in a separate section. Now, you know most of the fields we need to get data from a form. Let's start with an input with type text field. In the previous day, we saw different types of events and today we will focus on more of _onChange_ event type which triggers whenever an input field data changes. Input field has by default a memory to store input data but in this section we control that using state and we implement a controlled input. Today we will implement a controlled input. We will cover uncontrolled input in a separate section.
## Getting data from input field ## Getting data from an input field
So far we did not get any data from input field. Now, it is time to learn how to get data from an input field. We need on input field, event listener (onChange) and state to get data from a controlled input. See the example below. The h1 element below the input tag display what we write on the input. Check live [demo](https://codepen.io/Asabeneh/full/OJVpyqm). So far we did not get any data from input field. Now, it is time to learn how to get data from an input field. We need on input field, event listener (onChange) and state to get data from a controlled input. See the example below. The h1 element below the input tag display what we write on the input. Check live [demo](https://codepen.io/Asabeneh/full/OJVpyqm).
@ -208,7 +208,7 @@ class App extends React.Component {
} }
``` ```
The above form handles only text types but can handle different input field types. Let's do another form which handle all the different input field types. The above form handles only text types but do have different input field types. Let's do another form which handle all the different input field types.
## Get data from different input field types ## Get data from different input field types
@ -289,11 +289,14 @@ class App extends React.Component {
handleSubmit = (e) => { handleSubmit = (e) => {
// stops the default behavior of form element specifically refreshing of page // stops the default behavior of form element specifically refreshing of page
e.preventDefault() e.preventDefault()
e.preventDefault()
const { const {
firstName, firstName,
lastName, lastName,
email, email,
tel,
dateOfBirth,
favoriteColor,
weight,
country, country,
gender, gender,
bio, bio,
@ -312,6 +315,10 @@ class App extends React.Component {
firstName, firstName,
lastName, lastName,
email, email,
tel,
dateOfBirth,
favoriteColor,
weight,
country, country,
gender, gender,
bio, bio,
@ -323,20 +330,29 @@ class App extends React.Component {
render() { render() {
// accessing the state value by destrutcturing the state // accessing the state value by destrutcturing the state
const { firstName, lastName, title, country } = this.state const {
firstName,
lastName,
email,
tel,
dateOfBirth,
favoriteColor,
weight,
country,
gender,
bio,
} = this.state
return ( return (
<div className='App'> <div className='App'>
<h3>Add Student</h3> <h3>Add Student</h3>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<fieldset>
<legend>React Form and Form Validation</legend>
<div className='row'> <div className='row'>
<div className='form-group'> <div className='form-group'>
<label htmlFor='firstName'>First Name </label> <label htmlFor='firstName'>First Name </label>
<input <input
type='text' type='text'
name='firstName' name='firstName'
value={this.state.firstName} value={firstName}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='First Name' placeholder='First Name'
/> />
@ -356,7 +372,7 @@ class App extends React.Component {
<input <input
type='email' type='email'
name='email' name='email'
value={this.state.email} value={email}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Email' placeholder='Email'
/> />
@ -368,7 +384,7 @@ class App extends React.Component {
<input <input
type='tel' type='tel'
name='tel' name='tel'
value={this.state.tel} value={tel}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Tel' placeholder='Tel'
/> />
@ -379,7 +395,7 @@ class App extends React.Component {
<input <input
type='date' type='date'
name='dateOfBirth' name='dateOfBirth'
value={this.state.dateOfBirth} value={dateOfBirth}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Date of Birth' placeholder='Date of Birth'
/> />
@ -390,18 +406,18 @@ class App extends React.Component {
type='color' type='color'
id='color' id='color'
name='color' name='color'
value={this.state.color} value={color}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Favorite Color' placeholder='Favorite Color'
/> />
</div> </div>
<div className='form-group'> <div className='form-group'>
<label htmlFor='dateOfBirth'>Weight </label> <label htmlFor='weight'>Weight </label>
<input <input
type='number' type='number'
id='weight' id='weight'
name='weight' name='weight'
value={this.state.weight} value={weight}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Weight in Kg' placeholder='Weight in Kg'
/> />
@ -422,7 +438,7 @@ class App extends React.Component {
name='gender' name='gender'
value='Female' value='Female'
onChange={this.handleChange} onChange={this.handleChange}
checked={this.state.gender === 'Female'} checked={gender === 'Female'}
/> />
<label htmlFor='female'>Female</label> <label htmlFor='female'>Female</label>
</div> </div>
@ -433,7 +449,7 @@ class App extends React.Component {
name='gender' name='gender'
value='Male' value='Male'
onChange={this.handleChange} onChange={this.handleChange}
checked={this.state.gender === 'Male'} checked={gender === 'Male'}
/> />
<label htmlFor='male'>Male</label> <label htmlFor='male'>Male</label>
</div> </div>
@ -444,7 +460,7 @@ class App extends React.Component {
name='gender' name='gender'
value='Other' value='Other'
onChange={this.handleChange} onChange={this.handleChange}
checked={this.state.gender === 'Other'} checked={gender === 'Other'}
/> />
<label htmlFor='other'>Other</label> <label htmlFor='other'>Other</label>
</div> </div>
@ -485,7 +501,7 @@ class App extends React.Component {
<textarea <textarea
id='bio' id='bio'
name='bio' name='bio'
value={this.state.bio} value={bio}
onChange={this.handleChange} onChange={this.handleChange}
cols='120' cols='120'
rows='10' rows='10'
@ -499,7 +515,6 @@ class App extends React.Component {
<div> <div>
<button>Submit</button> <button>Submit</button>
</div> </div>
</fieldset>
</form> </form>
</div> </div>
) )
@ -598,7 +613,6 @@ class App extends Component {
skills: { ...this.state.skills, [name]: checked }, skills: { ...this.state.skills, [name]: checked },
}) })
} else if (type === 'file') { } else if (type === 'file') {
console.log(type, 'cehck here')
this.setState({ [name]: e.target.files[0] }) this.setState({ [name]: e.target.files[0] })
} else { } else {
this.setState({ [name]: value }) this.setState({ [name]: value })
@ -609,7 +623,11 @@ class App extends Component {
this.setState({ touched: { ...this.state.touched, [name]: true } }) this.setState({ touched: { ...this.state.touched, [name]: true } })
} }
validate = () => { validate = () => {
const errors = {} // Object to collect error feedback and to display on the form
const errors = {
firstName: '',
}
if ( if (
(this.state.touched.firstName && this.state.firstName.length < 3) || (this.state.touched.firstName && this.state.firstName.length < 3) ||
(this.state.touched.firstName && this.state.firstName.length > 12) (this.state.touched.firstName && this.state.firstName.length > 12)
@ -663,14 +681,13 @@ class App extends Component {
render() { render() {
// accessing the state value by destrutcturing the state // accessing the state value by destrutcturing the state
// the noValidate attribute on the form is to stop the HTML5 built-in validation
const { firstName } = this.validate() const { firstName } = this.validate()
return ( return (
<div className='App'> <div className='App'>
<h3>Add Student</h3> <h3>Add Student</h3>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit} noValidate>
<fieldset>
<legend>React Form and Form Validation</legend>
<div className='row'> <div className='row'>
<div className='form-group'> <div className='form-group'>
<label htmlFor='firstName'>First Name </label> <label htmlFor='firstName'>First Name </label>
@ -731,15 +748,15 @@ class App extends Component {
<label htmlFor='favoriteColor'>Favorite Color</label> <label htmlFor='favoriteColor'>Favorite Color</label>
<input <input
type='color' type='color'
id='color' id='favoriteColor'
name='color' name='favoriteColor'
value={this.state.color} value={this.state.favoriteColor}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Favorite Color' placeholder='Favorite Color'
/> />
</div> </div>
<div className='form-group'> <div className='form-group'>
<label htmlFor='dateOfBirth'>Weight </label> <label htmlFor='weight'>Weight </label>
<input <input
type='number' type='number'
id='weight' id='weight'
@ -842,7 +859,6 @@ class App extends Component {
<div> <div>
<button>Submit</button> <button>Submit</button>
</div> </div>
</fieldset>
</form> </form>
</div> </div>
) )

21
12_Day_Forms/12_forms_boilerplate/src/index.js
Unescape View File

@ -69,7 +69,6 @@ class App extends Component {
skills: { ...this.state.skills, [name]: checked }, skills: { ...this.state.skills, [name]: checked },
}) })
} else if (type === 'file') { } else if (type === 'file') {
console.log(type, 'cehck here')
this.setState({ [name]: e.target.files[0] }) this.setState({ [name]: e.target.files[0] })
} else { } else {
this.setState({ [name]: value }) this.setState({ [name]: value })
@ -80,7 +79,11 @@ class App extends Component {
this.setState({ touched: { ...this.state.touched, [name]: true } }) this.setState({ touched: { ...this.state.touched, [name]: true } })
} }
validate = () => { validate = () => {
const errors = {} // Object to collect error feedback and to display on the form
const errors = {
firstName: '',
}
if ( if (
(this.state.touched.firstName && this.state.firstName.length < 3) || (this.state.touched.firstName && this.state.firstName.length < 3) ||
(this.state.touched.firstName && this.state.firstName.length > 12) (this.state.touched.firstName && this.state.firstName.length > 12)
@ -134,14 +137,13 @@ class App extends Component {
render() { render() {
// accessing the state value by destrutcturing the state // accessing the state value by destrutcturing the state
// the noValidate attribute on the form is to stop the HTML5 built-in validation
const { firstName } = this.validate() const { firstName } = this.validate()
return ( return (
<div className='App'> <div className='App'>
<h3>Add Student</h3> <h3>Add Student</h3>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit} noValidate>
<fieldset>
<legend>React Form and Form Validation</legend>
<div className='row'> <div className='row'>
<div className='form-group'> <div className='form-group'>
<label htmlFor='firstName'>First Name </label> <label htmlFor='firstName'>First Name </label>
@ -203,15 +205,15 @@ class App extends Component {
<label htmlFor='favoriteColor'>Favorite Color</label> <label htmlFor='favoriteColor'>Favorite Color</label>
<input <input
type='color' type='color'
id='color' id='favoriteColor'
name='color' name='favoriteColor'
value={this.state.color} value={this.state.favoriteColor}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Favorite Color' placeholder='Favorite Color'
/> />
</div> </div>
<div className='form-group'> <div className='form-group'>
<label htmlFor='dateOfBirth'>Weight </label> <label htmlFor='weight'>Weight </label>
<input <input
type='number' type='number'
id='weight' id='weight'
@ -314,7 +316,6 @@ class App extends Component {
<div> <div>
<button>Submit</button> <button>Submit</button>
</div> </div>
</fieldset>
</form> </form>
</div> </div>
) )

Write Preview
Loading…
Cancel
Save