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 added

Browse Source
pull/59/head
Asabeneh 5 years ago
parent 92e3e69e4f
commit 1e26e7f043
16 changed files with 14244 additions and 2 deletions
Show Stats Download Patch File Download Diff File

2
.gitignore vendored
Unescape View File

@ -1,5 +1,5 @@
draft.md
react-for-everyone.md
component.md
12_Day_Forms

874
12_Day_Forms/11_forms.md
Unescape View File

@ -0,0 +1,874 @@
<div align="center">
<h1> 30 Days Of React: Forms</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 11](../11_Day_Events/11_events.md) | [Day 13 >>]()
![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 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)
- [What is validation?](#what-is-validation)
- [What is the purpose of validation](#what-is-the-purpose-of-validation)
- [Validation Types](#validation-types)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# 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
```html
<input type="text" />
<input type="number" />
<input type="range" />
<input type="email" />
<input type="password" />
<input type="tel" />
<input type="checkbox" />
<input type="radio" />
<input type="color" />
<input type="url" />
<input type="image" />
<input type="file" />
<input type="hidden" />
<input type="date" />
<input type="datetime-local" />
<input type="month" />
<input type="week" />
<input type="time" />
<input type="reset" />
<input type="search" />
<input type="submit" />
<input type="button" />
```
Another HTML fields to get data from form are textarea and options.
```html
<textarea>Please write your comment ...</textarea>
<select name="country">
<option value="">Select your country</option>
<option value="finland">Finland</option>
<option value="sweden">Sweden</option>
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="iceland">Iceland</option>
</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.
## Getting data from 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 {
// declaring state
// initial state
state = {
firstName: '',
}
handleChange = (e) => {
const value = e.target.value
this.setState({ firstName: value })
}
render() {
// accessing the state value and this value will injected to the input in the value attribute
const firstName = this.state.firstName
return (
<div className='App'>
<label htmlFor='firstName'>First Name: </l>
<input
type='text'
id='firstName'
name='firstName'
placeholder='First Name'
value={firstName}
onChange={this.handleChange}
/>
<h1>{this.state.firstName}</h1>
</div>
)
}
}
```
We usually use form to handle use information. Let us move to form section and make use the form element.
## Getting multiple input data from form
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 {
// declaring state
state = {
firstName: '',
lastName: '',
country: '',
title: '',
}
handleChange = (e) => {
/*
// we can get the name and value like this but we can also destructure it from e.target
const name = e.target.name
const value = e.target.value
*/
const { name, value } = e.target
// [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state
this.setState({ [name]: value })
}
handleSubmit = (e) => {
// stops the default behavior of form element specifically refreshing of page
e.preventDefault()
console.log(this.state)
}
render() {
// accessing the state value by destrutcturing the state
const { firstName, lastName, title, country } = this.state
return (
<div className='App'>
<h3>Add Student</h3>
<form onSubmit={this.handleSubmit}>
<div>
<input
type='text'
name='firstName'
placeholder='First Name'
value={firstName}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='lastName'
placeholder='Last Name'
value={lastName}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='country'
placeholder='Country'
value={country}
onChange={this.handleChange}
/>
</div>
<div>
<input
type='text'
name='title'
placeholder='Title'
value={title}
onChange={this.handleChange}
/>
</div>
<button onClick={this.changeAnimal} class='btn btn-success'>
Submit
</button>
</form>
</div>
)
}
}
```
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.
## Get data from different input field types
```js
// index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
const options = [
{
value: '',
label: '-- Select Country--',
},
{
value: 'Finland',
label: 'Finland',
},
{
value: 'Sweden',
label: 'Sweden',
},
{
value: 'Norway',
label: 'Norway',
},
{
value: 'Denmark',
label: 'Denmark',
},
]
// mapping the options to list(array) of JSX options
const selectOptions = options.map(({ value, label }) => (
<option value={value}> {label}</option>
))
class App extends React.Component {
// declaring state
state = {
firstName: '',
lastName: '',
email: '',
country: '',
tel: '',
dateOfBirth: '',
favoriteColor: '',
weight: '',
gender: '',
file: '',
bio: '',
skills: {
html: false,
css: false,
javascript: false,
},
}
handleChange = (e) => {
/*
// we can get the name and value like this but we can also destructure it from e.target
const name = e.target.name
const value = e.target.value
*/
const { name, value, type, checked } = e.target
// [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state
if (type === 'checkbox') {
this.setState({
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 })
}
}
handleSubmit = (e) => {
// stops the default behavior of form element specifically refreshing of page
e.preventDefault()
e.preventDefault()
const {
firstName,
lastName,
email,
country,
gender,
bio,
file,
skills,
} = this.state
const formattedSkills = []
for (const key in skills) {
console.log(key)
if (skills[key]) {
formattedSkills.push(key.toUpperCase())
}
}
const data = {
firstName,
lastName,
email,
country,
gender,
bio,
file,
skills: formattedSkills,
}
console.log(data)
}
render() {
// accessing the state value by destrutcturing the state
const { firstName, lastName, title, country } = 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='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='color'
name='color'
value={this.state.color}
onChange={this.handleChange}
placeholder='Favorite Color'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>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='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>
</div>
<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}
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>
</fieldset>
</form>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
```
## Form Validation
## What is validation?
The action or process of checking or proving the validity or accuracy of something in this case data.
## What is the purpose of validation
The main purpose to validation is to get a desired data from users. In addition, to prevent malicious users and data.
## Validation Types
Validation can be done in client side or sever side. At the moment, we are using React which is a front end technology and we use client side validation.A validation can implement using HTML5 built-in validation or using JavaScript(using regular expression).
In the following snippet of code, a validation has been implemented the first field. Try to understand how it works. The onBlur event has been used to check validity when the input is not focused.
```js
// index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
const options = [
{
value: '',
label: '-- Select Country--',
},
{
value: 'Finland',
label: 'Finland',
},
{
value: 'Sweden',
label: 'Sweden',
},
{
value: 'Norway',
label: 'Norway',
},
{
value: 'Denmark',
label: 'Denmark',
},
]
// mapping the options to list(array) of JSX options
const selectOptions = options.map(({ value, label }) => (
<option value={value}> {label}</option>
))
class App extends React.Component {
// declaring state
state = {
firstName: '',
lastName: '',
email: '',
country: '',
tel: '',
dateOfBirth: '',
favoriteColor: '',
weight: '',
gender: '',
file: '',
bio: '',
skills: {
html: false,
css: false,
javascript: false,
},
touched: {
firstName: false,
lastName: false,
},
}
handleChange = (e) => {
/*
// we can get the name and value like this but we can also destructure it from e.target
const name = e.target.name
const value = e.target.value
*/
const { name, value, type, checked } = e.target
// [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state
if (type === 'checkbox') {
this.setState({
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 })
}
}
handleBlur = (e) => {
const { name, value } = e.target
this.setState({ touched: { ...this.state.touched, [name]: true } })
}
validate = () => {
const errors = {}
if (
(this.state.touched.firstName && this.state.firstName.length < 3) ||
(this.state.touched.firstName && this.state.firstName.length > 12)
) {
errors.firstName = 'First name must be between 2 and 12'
}
return errors
}
handleSubmit = (e) => {
// stops the default behavior of form element specifically refreshing of page
e.preventDefault()
const {
firstName,
lastName,
email,
country,
gender,
bio,
file,
skills,
} = this.state
const formattedSkills = []
for (const key in skills) {
console.log(key)
if (skills[key]) {
formattedSkills.push(key.toUpperCase())
}
}
const data = {
firstName,
lastName,
email,
country,
gender,
bio,
file,
skills: formattedSkills,
}
console.log(data)
}
render() {
// accessing the state value by destrutcturing the state
const { firstName } = this.validate()
return (
<div className='App'>
<h3>Add Student</h3>
<form onSubmit={this.handleSubmit}>
<fieldset>
<legend>React Form</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>
<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='color'
name='color'
value={this.state.color}
onChange={this.handleChange}
placeholder='Favorite Color'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>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='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>
</div>
<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}
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>
</fieldset>
</form>
</div>
)
}
}
const rootElement = document.getElementById('root')
// we render the JSX element using the ReactDOM package
ReactDOM.render(<App />, rootElement)
```
# Exercises
## Exercises: Level 1
1. What is the importance of form?
2. How many input types do you know?
3. Mention at least four attributes of an input element
4. What is the importance of htmlFor?
5. Write an input type which is not given in the example if there is?
6. What is a controlled input?
7. How do you bind data in React? The first input field example is data binding in React.
8. What is validation?
9. What is the event type we use to listen when an input changes?
10. What are event types we use to validate an input?
## Exercises: Level 2
1. Validate the form given above (a gif image or a video will be provided later)
## Exercises: Level 3
🎉 CONGRATULATIONS ! 🎉
[<< Day 11](../11_Day_Events/11_events.md) | [Day 13 >>]()

23
12_Day_Forms/11_forms_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
12_Day_Forms/11_forms_boilerplate/README.md
Unescape View File

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

34
12_Day_Forms/11_forms_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
12_Day_Forms/11_forms_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
12_Day_Forms/11_forms_boilerplate/src/data/countries.js
View File

File diff suppressed because it is too large Load Diff

13
12_Day_Forms/11_forms_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
12_Day_Forms/11_forms_boilerplate/src/images/asabeneh.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
12_Day_Forms/11_forms_boilerplate/src/images/css_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
12_Day_Forms/11_forms_boilerplate/src/images/html_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
12_Day_Forms/11_forms_boilerplate/src/images/js_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
12_Day_Forms/11_forms_boilerplate/src/images/react_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

318
12_Day_Forms/11_forms_boilerplate/src/index.js
Unescape View File

@ -0,0 +1,318 @@
// index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
const options = [
{
value: '',
label: '-- Select Country--',
},
{
value: 'Finland',
label: 'Finland',
},
{
value: 'Sweden',
label: 'Sweden',
},
{
value: 'Norway',
label: 'Norway',
},
{
value: 'Denmark',
label: 'Denmark',
},
]
// mapping the options to list(array) of JSX options
const selectOptions = options.map(({ value, label }) => (
<option value={value}> {label}</option>
))
class App extends React.Component {
// declaring state
state = {
firstName: '',
lastName: '',
email: '',
country: '',
tel: '',
dateOfBirth: '',
favoriteColor: '',
weight: '',
gender: '',
file: '',
bio: '',
skills: {
html: false,
css: false,
javascript: false,
},
touched: {
firstName: false,
lastName: false,
},
}
handleChange = (e) => {
/*
// we can get the name and value like this but we can also destructure it from e.target
const name = e.target.name
const value = e.target.value
*/
const { name, value, type, checked } = e.target
// [variablename] this we can make a value stored in a certain variable could be a key for an object, in this case a key for the state
if (type === 'checkbox') {
this.setState({
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 })
}
}
handleBlur = (e) => {
const { name, value } = e.target
this.setState({ touched: { ...this.state.touched, [name]: true } })
}
validate = () => {
const errors = {}
if (
(this.state.touched.firstName && this.state.firstName.length < 3) ||
(this.state.touched.firstName && this.state.firstName.length > 12)
) {
errors.firstName = 'First name must be between 2 and 12'
}
return errors
}
handleSubmit = (e) => {
// stops the default behavior of form element specifically refreshing of page
e.preventDefault()
const {
firstName,
lastName,
email,
country,
gender,
bio,
file,
skills,
} = this.state
const formattedSkills = []
for (const key in skills) {
console.log(key)
if (skills[key]) {
formattedSkills.push(key.toUpperCase())
}
}
const data = {
firstName,
lastName,
email,
country,
gender,
bio,
file,
skills: formattedSkills,
}
console.log(data)
}
render() {
// accessing the state value by destrutcturing the state
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>
<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='color'
name='color'
value={this.state.color}
onChange={this.handleChange}
placeholder='Favorite Color'
/>
</div>
<div className='form-group'>
<label htmlFor='dateOfBirth'>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='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>
</div>
<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}
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>
</fieldset>
</form>
</div>
)
}
}
const rootElement = document.getElementById('root')
// we render the JSX element using the ReactDOM package
ReactDOM.render(<App />, rootElement)

10849
12_Day_Forms/11_forms_boilerplate/yarn.lock
View File

File diff suppressed because it is too large Load Diff

4
readMe.md
Unescape View File

@ -34,7 +34,7 @@
|09|[Conditional Rendering](./09_Day_Conditional_Rendering/09_conditional_rendering.md)|
|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|[Forms](./12_Day_Forms/11_forms.md)|
|13|[Controlled and Uncondrolled Component 😞]()|
|13|[Component Life Cycles😞]()|
@ -48,6 +48,8 @@ Support [*Asabeneh*](https://www.patreon.com/asabeneh?fan_landing=true) to creat
[<img src = './images/become_patreon.png' alt='become-asabeneh-patreon' title='click' />](https://www.patreon.com/asabeneh?fan_landing=true)
</div>
---

Write Preview
Loading…
Cancel
Save