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

Merge pull request #7 from Asabeneh/master

Browse Source 
Day#13
pull/71/head
suryazi 5 years ago committed by GitHub
parent fbd2bfbd81 6a40359e2c
commit a20d2c5eaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 13786 additions and 452 deletions
Show Stats Download Patch File Download Diff File

2
11_Day_Events/11_events_boilerplate/README.md
Unescape View File

@ -1,4 +1,4 @@
# 30 Days of React App: Day 3
# 30 Days of React App: Day 11
In the project directory, you can run to start the project

628
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)
- [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)
- [Get data from different input field types](#get-data-from-different-input-field-types)
- [Form Validation](#form-validation)
@ -33,7 +33,7 @@
# 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
<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" />
```
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
<textarea>Please write your comment ...</textarea>
@ -82,16 +82,19 @@ Another HTML fields to get data from form are textarea and options.
</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).
The input element has many attributes such as value, name, id, placeholder, type and event handler. In addition, we can link a label and an input field using an id of input field and htmlFor of the label.If label and input are linked it will focus the input when we click on label. Look at the example give below.
```js
class App extends React.Component {
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
// declaring state
// initial state
state = {
@ -107,7 +110,7 @@ class App extends React.Component {
const firstName = this.state.firstName
return (
<div className='App'>
<label htmlFor='firstName'>First Name: </l>
<label htmlFor='firstName'>First Name: </label>
<input
type='text'
id='firstName'
@ -121,6 +124,9 @@ class App extends React.Component {
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
```
We usually use form to handle use information. Let us move to form section and make use the form element.
@ -130,7 +136,9 @@ We usually use form to handle use information. Let us move to form section and m
In this section we will develop a small form which collect user information. Our user is a student. We use a parent form element and certain number of input elements to collect user information. In addition to that we will have event listener for the form (onSubmit) and for the inputs (onChange). See the following example try to see the commonts too. You can also check the live [demo](https://codepen.io/Asabeneh/full/eYNvJda).
```js
class App extends React.Component {
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
// declaring state
state = {
firstName: '',
@ -198,17 +206,18 @@ class App extends React.Component {
/>
</div>
<button onClick={this.changeAnimal} class='btn btn-success'>
Submit
</button>
<button class='btn btn-success'>Submit</button>
</form>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
```
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
@ -289,11 +298,14 @@ class App extends React.Component {
handleSubmit = (e) => {
// stops the default behavior of form element specifically refreshing of page
e.preventDefault()
e.preventDefault()
const {
firstName,
lastName,
email,
tel,
dateOfBirth,
favoriteColor,
weight,
country,
gender,
bio,
@ -312,6 +324,10 @@ class App extends React.Component {
firstName,
lastName,
email,
tel,
dateOfBirth,
favoriteColor,
weight,
country,
gender,
bio,
@ -323,183 +339,191 @@ class App extends React.Component {
render() {
// 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 (
<div className='App'>
<h3>Add Student</h3>
<form onSubmit={this.handleSubmit}>
<fieldset>
<legend>React Form and Form Validation</legend>
<div className='row'>
<div className='form-group'>
<label htmlFor='firstName'>First Name </label>
<input
type='text'
name='firstName'
value={this.state.firstName}
onChange={this.handleChange}
placeholder='First Name'
/>
</div>
<div className='form-group'>
<label htmlFor='lastName'>Last Name </label>
<input
type='text'
name='lastName'
value={this.state.lastName}
onChange={this.handleChange}
placeholder='Last Name'
/>
</div>
<div className='form-group'>
<label htmlFor='email'>Email </label>
<input
type='email'
name='email'
value={this.state.email}
onChange={this.handleChange}
placeholder='Email'
/>
</div>
</div>
<div className='row'>
<div className='form-group'>
<label htmlFor='tel'>Telephone </label>
<label htmlFor='firstName'>First Name </label>
<input
type='tel'
name='tel'
value={this.state.tel}
type='text'
name='firstName'
value={firstName}
onChange={this.handleChange}
placeholder='Tel'
placeholder='First Name'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>Date of birth </label>
<label htmlFor='lastName'>Last Name </label>
<input
type='date'
name='dateOfBirth'
value={this.state.dateOfBirth}
type='text'
name='lastName'
value={this.state.lastName}
onChange={this.handleChange}
placeholder='Date of Birth'
placeholder='Last Name'
/>
</div>
<div className='form-group'>
<label htmlFor='favoriteColor'>Favorite Color</label>
<label htmlFor='email'>Email </label>
<input
type='color'
id='color'
name='color'
value={this.state.color}
type='email'
name='email'
value={email}
onChange={this.handleChange}
placeholder='Favorite Color'
placeholder='Email'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>Weight </label>
</div>
<div className='form-group'>
<label htmlFor='tel'>Telephone </label>
<input
type='tel'
name='tel'
value={tel}
onChange={this.handleChange}
placeholder='Tel'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>Date of birth </label>
<input
type='date'
name='dateOfBirth'
value={dateOfBirth}
onChange={this.handleChange}
placeholder='Date of Birth'
/>
</div>
<div className='form-group'>
<label htmlFor='favoriteColor'>Favorite Color</label>
<input
type='color'
id='color'
name='color'
value={color}
onChange={this.handleChange}
placeholder='Favorite Color'
/>
</div>
<div className='form-group'>
<label htmlFor='weight'>Weight </label>
<input
type='number'
id='weight'
name='weight'
value={weight}
onChange={this.handleChange}
placeholder='Weight in Kg'
/>
</div>
<div>
<label htmlFor='country'>Country</label> <br />
<select name='country' onChange={this.handleChange} id='country'>
{selectOptions}
</select>
</div>
<div>
<p>Gender</p>
<div>
<input
type='number'
id='weight'
name='weight'
value={this.state.weight}
type='radio'
id='female'
name='gender'
value='Female'
onChange={this.handleChange}
placeholder='Weight in Kg'
checked={gender === 'Female'}
/>
<label htmlFor='female'>Female</label>
</div>
<div>
<label htmlFor='country'>Country</label> <br />
<select name='country' onChange={this.handleChange} id='country'>
{selectOptions}
</select>
<input
id='male'
type='radio'
name='gender'
value='Male'
onChange={this.handleChange}
checked={gender === 'Male'}
/>
<label htmlFor='male'>Male</label>
</div>
<div>
<p>Gender</p>
<div>
<input
type='radio'
id='female'
name='gender'
value='Female'
onChange={this.handleChange}
checked={this.state.gender === 'Female'}
/>
<label htmlFor='female'>Female</label>
</div>
<div>
<input
id='male'
type='radio'
name='gender'
value='Male'
onChange={this.handleChange}
checked={this.state.gender === 'Male'}
/>
<label htmlFor='male'>Male</label>
</div>
<div>
<input
id='other'
type='radio'
name='gender'
value='Other'
onChange={this.handleChange}
checked={this.state.gender === 'Other'}
/>
<label htmlFor='other'>Other</label>
</div>
<input
id='other'
type='radio'
name='gender'
value='Other'
onChange={this.handleChange}
checked={gender === 'Other'}
/>
<label htmlFor='other'>Other</label>
</div>
</div>
<div>
<p>Select your skills</p>
<div>
<p>Select your skills</p>
<div>
<input
type='checkbox'
id='html'
name='html'
onChange={this.handleChange}
/>
<label htmlFor='html'>HTML</label>
</div>
<div>
<input
type='checkbox'
id='css'
name='css'
onChange={this.handleChange}
/>
<label htmlFor='css'>CSS</label>
</div>
<div>
<input
type='checkbox'
id='javascript'
name='javascript'
onChange={this.handleChange}
/>
<label htmlFor='javascript'>JavaScript</label>
</div>
</div>
<div>
<label htmlFor='bio'>Bio</label> <br />
<textarea
id='bio'
name='bio'
value={this.state.bio}
<input
type='checkbox'
id='html'
name='html'
onChange={this.handleChange}
cols='120'
rows='10'
placeholder='Write about yourself ...'
/>
<label htmlFor='html'>HTML</label>
</div>
<div>
<input type='file' name='file' onChange={this.handleChange} />
<input
type='checkbox'
id='css'
name='css'
onChange={this.handleChange}
/>
<label htmlFor='css'>CSS</label>
</div>
<div>
<button>Submit</button>
<input
type='checkbox'
id='javascript'
name='javascript'
onChange={this.handleChange}
/>
<label htmlFor='javascript'>JavaScript</label>
</div>
</fieldset>
</div>
<div>
<label htmlFor='bio'>Bio</label> <br />
<textarea
id='bio'
name='bio'
value={bio}
onChange={this.handleChange}
cols='120'
rows='10'
placeholder='Write about yourself ...'
/>
</div>
<div>
<input type='file' name='file' onChange={this.handleChange} />
</div>
<div>
<button>Submit</button>
</div>
</form>
</div>
)
@ -598,7 +622,6 @@ class App extends Component {
skills: { ...this.state.skills, [name]: checked },
})
} else if (type === 'file') {
console.log(type, 'cehck here')
this.setState({ [name]: e.target.files[0] })
} else {
this.setState({ [name]: value })
@ -609,7 +632,11 @@ class App extends Component {
this.setState({ touched: { ...this.state.touched, [name]: true } })
}
validate = () => {
const errors = {}
// Object to collect error feedback and to display on the form
const errors = {
firstName: '',
}
if (
(this.state.touched.firstName && this.state.firstName.length < 3) ||
(this.state.touched.firstName && this.state.firstName.length > 12)
@ -658,191 +685,190 @@ class App extends Component {
file,
skills: formattedSkills,
}
// the is the place we connect backend api to send the data to the database
console.log(data)
}
render() {
// 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()
return (
<div className='App'>
<h3>Add Student</h3>
<form onSubmit={this.handleSubmit}>
<fieldset>
<legend>React Form and Form Validation</legend>
<div className='row'>
<div className='form-group'>
<label htmlFor='firstName'>First Name </label>
<input
type='text'
name='firstName'
value={this.state.firstName}
onChange={this.handleChange}
onBlur={this.handleBlur}
placeholder='First Name'
/> <br />
<small>{firstName}</small>
</div>
<div className='form-group'>
<label htmlFor='lastName'>Last Name </label>
<input
type='text'
name='lastName'
value={this.state.lastName}
onChange={this.handleChange}
placeholder='Last Name'
/>
</div>
<div className='form-group'>
<label htmlFor='email'>Email </label>
<input
type='email'
name='email'
value={this.state.email}
onChange={this.handleChange}
placeholder='Email'
/>
</div>
</div>
<form onSubmit={this.handleSubmit} noValidate>
<div className='row'>
<div className='form-group'>
<label htmlFor='tel'>Telephone </label>
<label htmlFor='firstName'>First Name </label>
<input
type='tel'
name='tel'
value={this.state.tel}
type='text'
name='firstName'
value={this.state.firstName}
onChange={this.handleChange}
placeholder='Tel'
/>
onBlur={this.handleBlur}
placeholder='First Name'
/> <br />
<small>{firstName}</small>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>Date of birth </label>
<label htmlFor='lastName'>Last Name </label>
<input
type='date'
name='dateOfBirth'
value={this.state.dateOfBirth}
type='text'
name='lastName'
value={this.state.lastName}
onChange={this.handleChange}
placeholder='Date of Birth'
placeholder='Last Name'
/>
</div>
<div className='form-group'>
<label htmlFor='favoriteColor'>Favorite Color</label>
<label htmlFor='email'>Email </label>
<input
type='color'
id='color'
name='color'
value={this.state.color}
type='email'
name='email'
value={this.state.email}
onChange={this.handleChange}
placeholder='Favorite Color'
placeholder='Email'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>Weight </label>
</div>
<div className='form-group'>
<label htmlFor='tel'>Telephone </label>
<input
type='tel'
name='tel'
value={this.state.tel}
onChange={this.handleChange}
placeholder='Tel'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>Date of birth </label>
<input
type='date'
name='dateOfBirth'
value={this.state.dateOfBirth}
onChange={this.handleChange}
placeholder='Date of Birth'
/>
</div>
<div className='form-group'>
<label htmlFor='favoriteColor'>Favorite Color</label>
<input
type='color'
id='favoriteColor'
name='favoriteColor'
value={this.state.favoriteColor}
onChange={this.handleChange}
placeholder='Favorite Color'
/>
</div>
<div className='form-group'>
<label htmlFor='weight'>Weight </label>
<input
type='number'
id='weight'
name='weight'
value={this.state.weight}
onChange={this.handleChange}
placeholder='Weight in Kg'
/>
</div>
<div>
<label htmlFor='country'>Country</label> <br />
<select name='country' onChange={this.handleChange} id='country'>
{selectOptions}
</select>
</div>
<div>
<p>Gender</p>
<div>
<input
type='number'
id='weight'
name='weight'
value={this.state.weight}
type='radio'
id='female'
name='gender'
value='Female'
onChange={this.handleChange}
placeholder='Weight in Kg'
checked={this.state.gender === 'Female'}
/>
<label htmlFor='female'>Female</label>
</div>
<div>
<label htmlFor='country'>Country</label> <br />
<select name='country' onChange={this.handleChange} id='country'>
{selectOptions}
</select>
<input
id='male'
type='radio'
name='gender'
value='Male'
onChange={this.handleChange}
checked={this.state.gender === 'Male'}
/>
<label htmlFor='male'>Male</label>
</div>
<div>
<p>Gender</p>
<div>
<input
type='radio'
id='female'
name='gender'
value='Female'
onChange={this.handleChange}
checked={this.state.gender === 'Female'}
/>
<label htmlFor='female'>Female</label>
</div>
<div>
<input
id='male'
type='radio'
name='gender'
value='Male'
onChange={this.handleChange}
checked={this.state.gender === 'Male'}
/>
<label htmlFor='male'>Male</label>
</div>
<div>
<input
id='other'
type='radio'
name='gender'
value='Other'
onChange={this.handleChange}
checked={this.state.gender === 'Other'}
/>
<label htmlFor='other'>Other</label>
</div>
<input
id='other'
type='radio'
name='gender'
value='Other'
onChange={this.handleChange}
checked={this.state.gender === 'Other'}
/>
<label htmlFor='other'>Other</label>
</div>
</div>
<div>
<p>Select your skills</p>
<div>
<p>Select your skills</p>
<div>
<input
type='checkbox'
id='html'
name='html'
onChange={this.handleChange}
/>
<label htmlFor='html'>HTML</label>
</div>
<div>
<input
type='checkbox'
id='css'
name='css'
onChange={this.handleChange}
/>
<label htmlFor='css'>CSS</label>
</div>
<div>
<input
type='checkbox'
id='javascript'
name='javascript'
onChange={this.handleChange}
/>
<label htmlFor='javascript'>JavaScript</label>
</div>
</div>
<div>
<label htmlFor='bio'>Bio</label> <br />
<textarea
id='bio'
name='bio'
value={this.state.bio}
<input
type='checkbox'
id='html'
name='html'
onChange={this.handleChange}
cols='120'
rows='10'
placeholder='Write about yourself ...'
/>
<label htmlFor='html'>HTML</label>
</div>
<div>
<input type='file' name='file' onChange={this.handleChange} />
<input
type='checkbox'
id='css'
name='css'
onChange={this.handleChange}
/>
<label htmlFor='css'>CSS</label>
</div>
<div>
<button>Submit</button>
<input
type='checkbox'
id='javascript'
name='javascript'
onChange={this.handleChange}
/>
<label htmlFor='javascript'>JavaScript</label>
</div>
</fieldset>
</div>
<div>
<label htmlFor='bio'>Bio</label> <br />
<textarea
id='bio'
name='bio'
value={this.state.bio}
onChange={this.handleChange}
cols='120'
rows='10'
placeholder='Write about yourself ...'
/>
</div>
<div>
<input type='file' name='file' onChange={this.handleChange} />
</div>
<div>
<button>Submit</button>
</div>
</form>
</div>
)
@ -870,7 +896,7 @@ ReactDOM.render(<App />, rootElement)
## Exercises: Level 2
1. Validate the form given above (a gif image or a video will be provided later)
1. Validate the form given above (a gif image or a video will be provided later). First try to validate without using any library then try it with validator.js.
## Exercises: Level 3

2
12_Day_Forms/12_forms_boilerplate/README.md
Unescape View File

@ -1,4 +1,4 @@
# 30 Days of React App: Day 3
# 30 Days of React App: Day 12
In the project directory, you can run to start the project

295
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 },
})
} else if (type === 'file') {
console.log(type, 'cehck here')
this.setState({ [name]: e.target.files[0] })
} else {
this.setState({ [name]: value })
@ -80,7 +79,11 @@ class App extends Component {
this.setState({ touched: { ...this.state.touched, [name]: true } })
}
validate = () => {
const errors = {}
// Object to collect error feedback and to display on the form
const errors = {
firstName: '',
}
if (
(this.state.touched.firstName && this.state.firstName.length < 3) ||
(this.state.touched.firstName && this.state.firstName.length > 12)
@ -134,187 +137,185 @@ class App extends Component {
render() {
// 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()
return (
<div className='App'>
<h3>Add Student</h3>
<form onSubmit={this.handleSubmit}>
<fieldset>
<legend>React Form and Form Validation</legend>
<div className='row'>
<div className='form-group'>
<label htmlFor='firstName'>First Name </label>
<input
type='text'
name='firstName'
value={this.state.firstName}
onChange={this.handleChange}
onBlur={this.handleBlur}
placeholder='First Name'
/>{' '}
<br />
<small>{firstName}</small>
</div>
<div className='form-group'>
<label htmlFor='lastName'>Last Name </label>
<input
type='text'
name='lastName'
value={this.state.lastName}
onChange={this.handleChange}
placeholder='Last Name'
/>
</div>
<div className='form-group'>
<label htmlFor='email'>Email </label>
<input
type='email'
name='email'
value={this.state.email}
onChange={this.handleChange}
placeholder='Email'
/>
</div>
</div>
<form onSubmit={this.handleSubmit} noValidate>
<div className='row'>
<div className='form-group'>
<label htmlFor='tel'>Telephone </label>
<label htmlFor='firstName'>First Name </label>
<input
type='tel'
name='tel'
value={this.state.tel}
type='text'
name='firstName'
value={this.state.firstName}
onChange={this.handleChange}
placeholder='Tel'
/>
onBlur={this.handleBlur}
placeholder='First Name'
/>{' '}
<br />
<small>{firstName}</small>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>Date of birth </label>
<label htmlFor='lastName'>Last Name </label>
<input
type='date'
name='dateOfBirth'
value={this.state.dateOfBirth}
type='text'
name='lastName'
value={this.state.lastName}
onChange={this.handleChange}
placeholder='Date of Birth'
placeholder='Last Name'
/>
</div>
<div className='form-group'>
<label htmlFor='favoriteColor'>Favorite Color</label>
<label htmlFor='email'>Email </label>
<input
type='color'
id='color'
name='color'
value={this.state.color}
type='email'
name='email'
value={this.state.email}
onChange={this.handleChange}
placeholder='Favorite Color'
placeholder='Email'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>Weight </label>
</div>
<div className='form-group'>
<label htmlFor='tel'>Telephone </label>
<input
type='tel'
name='tel'
value={this.state.tel}
onChange={this.handleChange}
placeholder='Tel'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>Date of birth </label>
<input
type='date'
name='dateOfBirth'
value={this.state.dateOfBirth}
onChange={this.handleChange}
placeholder='Date of Birth'
/>
</div>
<div className='form-group'>
<label htmlFor='favoriteColor'>Favorite Color</label>
<input
type='color'
id='favoriteColor'
name='favoriteColor'
value={this.state.favoriteColor}
onChange={this.handleChange}
placeholder='Favorite Color'
/>
</div>
<div className='form-group'>
<label htmlFor='weight'>Weight </label>
<input
type='number'
id='weight'
name='weight'
value={this.state.weight}
onChange={this.handleChange}
placeholder='Weight in Kg'
/>
</div>
<div>
<label htmlFor='country'>Country</label> <br />
<select name='country' onChange={this.handleChange} id='country'>
{selectOptions}
</select>
</div>
<div>
<p>Gender</p>
<div>
<input
type='number'
id='weight'
name='weight'
value={this.state.weight}
type='radio'
id='female'
name='gender'
value='Female'
onChange={this.handleChange}
placeholder='Weight in Kg'
checked={this.state.gender === 'Female'}
/>
<label htmlFor='female'>Female</label>
</div>
<div>
<label htmlFor='country'>Country</label> <br />
<select name='country' onChange={this.handleChange} id='country'>
{selectOptions}
</select>
<input
id='male'
type='radio'
name='gender'
value='Male'
onChange={this.handleChange}
checked={this.state.gender === 'Male'}
/>
<label htmlFor='male'>Male</label>
</div>
<div>
<p>Gender</p>
<div>
<input
type='radio'
id='female'
name='gender'
value='Female'
onChange={this.handleChange}
checked={this.state.gender === 'Female'}
/>
<label htmlFor='female'>Female</label>
</div>
<div>
<input
id='male'
type='radio'
name='gender'
value='Male'
onChange={this.handleChange}
checked={this.state.gender === 'Male'}
/>
<label htmlFor='male'>Male</label>
</div>
<div>
<input
id='other'
type='radio'
name='gender'
value='Other'
onChange={this.handleChange}
checked={this.state.gender === 'Other'}
/>
<label htmlFor='other'>Other</label>
</div>
<input
id='other'
type='radio'
name='gender'
value='Other'
onChange={this.handleChange}
checked={this.state.gender === 'Other'}
/>
<label htmlFor='other'>Other</label>
</div>
</div>
<div>
<p>Select your skills</p>
<div>
<p>Select your skills</p>
<div>
<input
type='checkbox'
id='html'
name='html'
onChange={this.handleChange}
/>
<label htmlFor='html'>HTML</label>
</div>
<div>
<input
type='checkbox'
id='css'
name='css'
onChange={this.handleChange}
/>
<label htmlFor='css'>CSS</label>
</div>
<div>
<input
type='checkbox'
id='javascript'
name='javascript'
onChange={this.handleChange}
/>
<label htmlFor='javascript'>JavaScript</label>
</div>
</div>
<div>
<label htmlFor='bio'>Bio</label> <br />
<textarea
id='bio'
name='bio'
value={this.state.bio}
<input
type='checkbox'
id='html'
name='html'
onChange={this.handleChange}
cols='120'
rows='10'
placeholder='Write about yourself ...'
/>
<label htmlFor='html'>HTML</label>
</div>
<div>
<input type='file' name='file' onChange={this.handleChange} />
<input
type='checkbox'
id='css'
name='css'
onChange={this.handleChange}
/>
<label htmlFor='css'>CSS</label>
</div>
<div>
<button>Submit</button>
<input
type='checkbox'
id='javascript'
name='javascript'
onChange={this.handleChange}
/>
<label htmlFor='javascript'>JavaScript</label>
</div>
</fieldset>
</div>
<div>
<label htmlFor='bio'>Bio</label> <br />
<textarea
id='bio'
name='bio'
value={this.state.bio}
onChange={this.handleChange}
cols='120'
rows='10'
placeholder='Write about yourself ...'
/>
</div>
<div>
<input type='file' name='file' onChange={this.handleChange} />
</div>
<div>
<button>Submit</button>
</div>
</form>
</div>
)

178
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md
Unescape View File

@ -0,0 +1,178 @@
<div align="center">
<h1> 30 Days Of React: Uncontrolled Component</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> October, 2020</small>
</sub>
</div>
[<< Day 12](../12_Day_Forms/12_forms.md) | [Day 14 >>]()
![30 Days of React banner](../images/30_days_of_react_banner_day_13.jpg)
- [Uncotrolled Components](#uncotrolled-components)
- [Getting data from an uncontrolled input](#getting-data-from-an-uncontrolled-input)
- [Getting multiple input data from form](#getting-multiple-input-data-from-form)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# Uncotrolled Components
In the previous day challenge we have covered controlled inputs. In react most of the time we use controlled inputs as recommended on the official [documentation of React](https://reactjs.org/docs/uncontrolled-components.html).
To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM. In uncontrolled input we get data from input fields like traditional HTML form data handling.
An example of uncontrolled component
## Getting data from an uncontrolled input
```js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
firstName = React.createRef()
handleSubmit = (e) => {
e.preventDefault()
console.log(this.firstName.current.value)
}
render() {
return (
<div className='App'>
<form onSubmit={this.handleSubmit}>
<label htmlFor='firstName'>First Name: </label>
<input
type='text'
id='firstName'
name='firstName'
placeholder='First Name'
ref={this.firstName}
/>
<button type='submit'>Submit</button>
</form>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
```
## Getting multiple input data from form
We can grab multiple input data from DOM. We are not directly targeting the DOM but React is getting data from DOM using ref.
```js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
firstName = React.createRef()
lastName = React.createRef()
country = React.createRef()
title = React.createRef()
handleSubmit = (e) => {
// stops the default behavior of form element specifically refreshing of page
e.preventDefault()
console.log(this.firstName.current.value)
console.log(this.lastName.current.value)
console.log(this.title.current.value)
console.log(this.country.current.value)
const data = {
firstName: this.firstName.current.value,
lastName: this.lastName.current.value,
title: this.title.current.value,
country: this.country.current.value,
}
// the is the place we connect backend api to send the data to the database
console.log(data)
}
render() {
return (
<div className='App'>
<h3>Add Student</h3>
<form onSubmit={this.handleSubmit}>
<div>
<input
type='text'
name='firstName'
placeholder='First Name'
ref={this.firstName}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='lastName'
placeholder='Last Name'
ref={this.lastName}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='country'
placeholder='Country'
ref={this.country}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='title'
placeholder='Title'
ref={this.title}
onChange={this.handleChange}
/>
</div>
<button className='btn btn-success'>Submit</button>
</form>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
```
Most of the time we use controlled input instead of uncontrolled input. In case if you want to target some element on the DOM you will use ref to get the content of that element. Don't touch directly using pure JavaScript. When you develop a React application do not touch the DOM directly because React has its own way of handling the DOM manipulation.
# Exercises
## Exercises: Level 1
1. What is a controlled input?
2. What is an uncontrolled input
3. How do you get a content of a certain HTML element in React ?
4. Why it is not a good idea to touch the DOM directly in React ?
5. What is most frequently used in React ? Controlled or Uncontrolled input.
## Exercises: Level 2
## Exercises: Level 3
🎉 CONGRATULATIONS ! 🎉
[<< Day 12](../12_Day_Forms/12_forms.md) | [Day 14 >>]()

23
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/.gitignore vendored
Unescape View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

5
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/README.md
Unescape View File

@ -0,0 +1,5 @@
# 30 Days of React App: Day 13
In the project directory, you can run to start the project
### `npm start`

34
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/package.json
Unescape View File

@ -0,0 +1,34 @@
{
"name": "30-days-of-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

111
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/public/index.html
Unescape View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
rel="stylesheet"
/>
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>30 Days Of React App</title>
<style>
/* == General style === */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
line-height: 1.5;
font-family: 'Montserrat';
font-weight: 300;
color: black;
}
.root {
min-height: 100%;
position: relative;
}
.header-wrapper,
.main-wrapper,
.footer-wrapper {
width: 85%;
margin: auto;
}
.header-wrapper,
.main-wrapper {
padding: 10px;
margin: 2px auto;
}
h1 {
font-size: 70px;
font-weight: 300;
}
h2,
h3 {
font-weight: 300;
}
header {
background-color: #61dbfb;
padding: 25;
padding: 10px;
}
main {
padding: 10px;
padding-bottom: 60px;
/* Height of the footer */
}
ul {
margin-left: 15px;
}
ul li {
list-style: none;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Height of the footer */
background: #6cf;
}
.footer-wrapper {
font-weight: 400;
text-align: center;
line-height: 60px;
}
.user-card {
margin-top: 10px;
}
.user-card > img {
border-radius: 50%;
width: 14%;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>

2013
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/data/countries.js
View File

File diff suppressed because it is too large Load Diff

13
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/data/ten_most_highest_populations.js
Unescape View File

@ -0,0 +1,13 @@
export const tenHighestPopulation = [
{ country: 'World', population: 7693165599 },
{ country: 'China', population: 1377422166 },
{ country: 'India', population: 1295210000 },
{ country: 'United States of America', population: 323947000 },
{ country: 'Indonesia', population: 258705000 },
{ country: 'Brazil', population: 206135893 },
{ country: 'Pakistan', population: 194125062 },
{ country: 'Nigeria', population: 186988000 },
{ country: 'Bangladesh', population: 161006790 },
{ country: 'Russian Federation', population: 146599183 },
{ country: 'Japan', population: 126960000 },
]

BIN
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/asabeneh.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/css_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/html_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/js_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/react_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

79
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/index.js
Unescape View File

@ -0,0 +1,79 @@
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
firstName = React.createRef()
lastName = React.createRef()
country = React.createRef()
title = React.createRef()
handleSubmit = (e) => {
// stops the default behavior of form element specifically refreshing of page
e.preventDefault()
console.log(this.firstName.current.value)
console.log(this.lastName.current.value)
console.log(this.title.current.value)
console.log(this.country.current.value)
const data = {
firstName: this.firstName.current.value,
lastName: this.lastName.current.value,
title: this.title.current.value,
country: this.country.current.value,
}
// the is the place we connect backend api to send the data to the database
console.log(data)
}
render() {
return (
<div className='App'>
<h3>Add Student</h3>
<form onSubmit={this.handleSubmit}>
<div>
<input
type='text'
name='firstName'
placeholder='First Name'
ref={this.firstName}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='lastName'
placeholder='Last Name'
ref={this.lastName}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='country'
placeholder='Country'
ref={this.country}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='title'
placeholder='Title'
ref={this.title}
onChange={this.handleChange}
/>
</div>
<button className='btn btn-success'>Submit</button>
</form>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

10849
13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/yarn.lock
View File

File diff suppressed because it is too large Load Diff

6
readMe.md
Unescape View File

@ -35,8 +35,10 @@
|10|[React Project Folder Structure](./10_React_Project_Folder_Structure/10_react_project_folder_structure.md)|
|11|[Events](./11_Day_Events/11_events.md)|
|12|[Forms](./12_Day_Forms/12_forms.md)|
|13|[Controlled and Uncondrolled Component 😞]()|
|13|[Component Life Cycles😞]()|
|13|[Controlled and Uncontrolled Component](./13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md)|
|14|[Component Life Cycles😞]()|
|15|[Styles in React😞]()|
🧡🧡🧡 HAPPY CODING 🧡🧡🧡
<div>

Write Preview
Loading…
Cancel
Save