From f01e6963776ec2c149ee81127b1510fab957a4c8 Mon Sep 17 00:00:00 2001 From: asabeneh Date: Tue, 13 Oct 2020 01:00:28 +0300 Subject: [PATCH 1/6] day_12 has been cleaned --- 12_Day_Forms/12_forms.md | 604 +++++++++--------- .../12_forms_boilerplate/src/index.js | 295 ++++----- 2 files changed, 458 insertions(+), 441 deletions(-) diff --git a/12_Day_Forms/12_forms.md b/12_Day_Forms/12_forms.md index b010c5c..ace0ce2 100644 --- a/12_Day_Forms/12_forms.md +++ b/12_Day_Forms/12_forms.md @@ -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 @@ -67,7 +67,7 @@ Form is used to collect data from user. Once in a while we use form to fill our ``` -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 @@ -82,9 +82,9 @@ Another HTML fields to get data from form are textarea and options. ``` -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). @@ -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 @@ -289,11 +289,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 +315,10 @@ class App extends React.Component { firstName, lastName, email, + tel, + dateOfBirth, + favoriteColor, + weight, country, gender, bio, @@ -323,183 +330,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 (

Add Student

-
- React Form and Form Validation -
-
- - -
-
- - -
-
- - -
-
- +
- +
-
- +
- +
-
- +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ +
+

Gender

+
+
-
- + +
-
-

Gender

-
- - -
-
- - -
-
- - -
+ +
+
+
+

Select your skills

-

Select your skills

-
- - -
-
- - -
-
- - -
-
-
-
- + + +``` + +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 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 { + // 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 ( +
+
+ ) + } +} +``` + +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 ( +
+

Add Student

+ +
+ +
+
+ +
+
+ +
+
+ +
+ + + +
+ ) + } +} +``` + +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 + +```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 }) => ( + +)) + +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() + const { + firstName, + lastName, + email, + tel, + dateOfBirth, + favoriteColor, + weight, + 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, + tel, + dateOfBirth, + favoriteColor, + weight, + country, + gender, + bio, + file, + skills: formattedSkills, + } + console.log(data) + } + + render() { + // accessing the state value by destrutcturing the state + const { + firstName, + lastName, + email, + tel, + dateOfBirth, + favoriteColor, + weight, + country, + gender, + bio, + } = this.state + return ( +
+

Add Student

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ +
+

Gender

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Select your skills

+
+ + +
+
+ + +
+
+ + +
+
+
+
+ - - -``` - -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 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). +```js +import React, { Component } from 'react' +import ReactDOM from 'react-dom' -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. +class App extends Component { + firstName = React.createRef() -```js -class App extends React.Component { - // declaring state - // initial state - state = { - firstName: '', - } - handleChange = (e) => { - const value = e.target.value - this.setState({ firstName: value }) + handleSubmit = (e) => { + e.preventDefault() + console.log(this.firstName.current.value) } render() { - // accessing the state value and this value will injected to the input in the value attribute - const firstName = this.state.firstName return (
-
) } } -``` -We usually use form to handle use information. Let us move to form section and make use the form element. +const rootElement = document.getElementById('root') +ReactDOM.render(, rootElement) +``` ## 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). +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 -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 }) - } +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.state) + + 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() { - // accessing the state value by destrutcturing the state - const { firstName, lastName, title, country } = this.state return (

Add Student

@@ -166,7 +114,7 @@ class App extends React.Component { type='text' name='firstName' placeholder='First Name' - value={firstName} + ref={this.firstName} onChange={this.handleChange} />
@@ -175,7 +123,7 @@ class App extends React.Component { type='text' name='lastName' placeholder='Last Name' - value={lastName} + ref={this.lastName} onChange={this.handleChange} />
@@ -184,7 +132,7 @@ class App extends React.Component { type='text' name='country' placeholder='Country' - value={country} + ref={this.country} onChange={this.handleChange} />
@@ -193,328 +141,12 @@ class App extends React.Component { type='text' name='title' placeholder='Title' - value={title} + ref={this.title} onChange={this.handleChange} />
- - -
- ) - } -} -``` - -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 - -```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 }) => ( - -)) - -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() - const { - firstName, - lastName, - email, - tel, - dateOfBirth, - favoriteColor, - weight, - 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, - tel, - dateOfBirth, - favoriteColor, - weight, - country, - gender, - bio, - file, - skills: formattedSkills, - } - console.log(data) - } - - render() { - // accessing the state value by destrutcturing the state - const { - firstName, - lastName, - email, - tel, - dateOfBirth, - favoriteColor, - weight, - country, - gender, - bio, - } = this.state - return ( -
-

Add Student

-
-
-
- - -
-
- - -
-
- - -
-
- -
- - -
- -
- - -
-
- - -
-
- - -
-
-
- -
- -
-

Gender

-
- - -
-
- - -
-
- - -
-
- -
-

Select your skills

-
- - -
-
- - -
-
- - -
-
-
-
-