From 34e4ef9d003e67fb2704324393a88282e6d58da0 Mon Sep 17 00:00:00 2001 From: asabeneh Date: Wed, 21 Oct 2020 22:45:58 +0300 Subject: [PATCH] day 22 has been added --- 12_Day_Forms/12_forms.md | 8 +- 21_Introducing_Hooks/21_introducing_hooks.md | 5 +- 22_Form_Using_Hooks/22_form_using_hooks.md | 972 ++ .../.gitignore | 23 + .../22_form_using_hooks_boilerplate/README.md | 5 + .../package.json | 34 + .../public/index.html | 111 + .../src/data/countries.js | 2013 +++ .../src/data/ten_most_highest_populations.js | 13 + .../src/images/asabeneh.jpg | Bin 0 -> 20817 bytes .../src/images/css_logo.png | Bin 0 -> 84176 bytes .../src/images/html_logo.png | Bin 0 -> 18060 bytes .../src/images/js_logo.png | Bin 0 -> 11783 bytes .../src/images/react_logo.png | Bin 0 -> 41477 bytes .../src/index.js | 365 + .../src/index.scss | 86 + .../22_form_using_hooks_boilerplate/yarn.lock | 10849 ++++++++++++++++ readMe.md | 1 + 18 files changed, 14477 insertions(+), 8 deletions(-) create mode 100644 22_Form_Using_Hooks/22_form_using_hooks.md create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/.gitignore create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/README.md create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/package.json create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/public/index.html create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/data/countries.js create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/data/ten_most_highest_populations.js create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/asabeneh.jpg create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/css_logo.png create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/html_logo.png create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/js_logo.png create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/react_logo.png create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/index.js create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/index.scss create mode 100644 22_Form_Using_Hooks/22_form_using_hooks_boilerplate/yarn.lock diff --git a/12_Day_Forms/12_forms.md b/12_Day_Forms/12_forms.md index 6fef608..c9b5978 100644 --- a/12_Day_Forms/12_forms.md +++ b/12_Day_Forms/12_forms.md @@ -86,7 +86,7 @@ Now, you know most of the fields we need to get data from a form. Let's start wi ## 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 an 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. @@ -133,7 +133,7 @@ const rootElement = document.getElementById('root') ReactDOM.render(, rootElement) ``` -We usually use form to handle use information. Let us move to form section and make use the form element. +We usually use form to handle user information. Let us move to form section and make use the form element. ## Getting multiple input data from form @@ -442,7 +442,7 @@ class App extends React.Component { type='color' id='color' name='color' - value={color} + value={favoriteColor} onChange={this.handleChange} placeholder='Favorite Color' /> @@ -930,7 +930,7 @@ ReactDOM.render(, rootElement) 8. What event type do you use to listen changes on an input field? 9. What is the value of a checked checkbox? 10. When do you use onChange, onBlur, onSubmit? -11. What is the purpose of writing e.preventDefault() inside the submit handler method? +11. What is the purpose of writing e.preventDefault() inside the submit handler method? 12. How do you bind data in React? The first input field example is data binding in React. 13. What is validation? 14. What is the event type you use to listen when an input changes? diff --git a/21_Introducing_Hooks/21_introducing_hooks.md b/21_Introducing_Hooks/21_introducing_hooks.md index abee378..5a04e77 100644 --- a/21_Introducing_Hooks/21_introducing_hooks.md +++ b/21_Introducing_Hooks/21_introducing_hooks.md @@ -31,7 +31,7 @@ In the previous, section you have learned how to use React with hooks which is the older version. Currently, hooks has been introduced to React. -Hooks are a new addition in React 16.8. They allow you use state and other React features without writing a class component. If we are using hooks we can have only a functional component in the entire application. For more detail explanation you check [React documentation](https://reactjs.org/docs/hooks-reference.html). +Hooks are a new addition in React 16.8. They allow you use state, life cycle methods and other React features without writing a class component. If we are using hooks we can have only a functional component in the entire application. For more detail explanation you check [React documentation](https://reactjs.org/docs/hooks-reference.html). Different hooks have been introduced to React:Basic hooks and additional hooks @@ -405,6 +405,3 @@ Convert everything you wrote to React hooks. 🎉 CONGRATULATIONS ! 🎉 [<< Day 20](../20_projects/20_projects.md) | [Day 22>>]() - - - diff --git a/22_Form_Using_Hooks/22_form_using_hooks.md b/22_Form_Using_Hooks/22_form_using_hooks.md new file mode 100644 index 0000000..dc7988f --- /dev/null +++ b/22_Form_Using_Hooks/22_form_using_hooks.md @@ -0,0 +1,972 @@ +
+

30 Days Of React: Form Using React Hooks

+ + + + + Twitter Follow + + +Author: +Asabeneh Yetayeh
+ October, 2020 + + +
+ +[<< Day 21](../21_Introducing_Hooks/21_introducing_hooks.md) | [Day 23>>]() + +![30 Days of React banner](../images/30_days_of_react_banner_day_22.jpg) + +- [Introducing React Hook](#introducing-react-hook) + - [Basic Hooks](#basic-hooks) + - [State Hook](#state-hook) + - [Effect Hook](#effect-hook) + - [Context Hook](#context-hook) + - [Additional Hook](#additional-hook) +- [Exercises](#exercises) + - [Exercises: Level 1](#exercises-level-1) + +# Forms + +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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +Another HTML fields to get data from a form are textarea and select with options elements. + +```html + + + +``` + +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 lessons, 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. + +## Getting data from an input field + +So far used class based components to use state and to get data from controlled input but in this section we will use useState hooks. Now, it is time to learn how to get data from an input field using hooks. We need an 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/jOrVqbv). + +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 +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const App = (props) => { + // initial state and method to update state + const [firstName, setFirstName] = useState('') + const handleChange = (e) => { + const value = e.target.value + setFirstName(value) + } + return ( +
+ + +

{firstName}

+
+ ) +} + +const rootElement = document.getElementById('root') +ReactDOM.render(, rootElement) +``` + +We usually use form to handle user 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). + +As you can see we have four fields, if you we create a separate method to update all the fields we will have method for updating(firstName, lastName, country and title) instead let's have one method which can update all. + +```js +import React, { useState } from 'react' +import ReactDOM from 'react-dom' + +const App = (props) => { + const initialState = { + firstName: '', + lastName: '', + country: '', + title: '', + } + const [formData, setData] = useState(initialState) + + const onChange = (e) => { + const { name, value } = e.target + setData({ ...formData, [name]: value }) + } + const onSubmit = (e) => { + /* + e.preventDefault() + stops the default behavior of form element + specifically refreshing of page + */ + e.preventDefault() + + /* + the is the place where we connect backend api + to send the data to the database + */ + console.log(formData) + } + + // accessing the state value by destrutcturing the state + const { firstName, lastName, title, country } = formData + return ( +
+

Add Student

+
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+ ) +} + +const rootElement = document.getElementById('root') +ReactDOM.render(, rootElement) +``` + +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, { useState } 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 }) => ( + +)) + +const App = (props) => { + const initialState = { + firstName: '', + lastName: '', + email: '', + title: '', + country: '', + tel: '', + dateOfBirth: '', + favoriteColor: '', + weight: '', + gender: '', + file: '', + bio: '', + skills: { + html: false, + css: false, + javascript: false, + }, + } + const [formData, setFormData] = useState(initialState) + + const onChange = (e) => { + /* + we can get the name and value like: e.target.name, e.target.value + Wwe can also destructure name and value from e.target + const name = e.target.name + const value = e.target.value + */ + const { name, value, type, checked } = e.target + /* + [variablename] 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') { + setFormData({ + ...formData, + skills: { ...formData.skills, [name]: checked }, + }) + } else if (type === 'file') { + setFormData({ ...formData, [name]: e.target.files[0] }) + } else { + setFormData({ ...formData, [name]: value }) + } + } + const onSubmit = (e) => { + /* + e.preventDefault() + stops the default behavior of form element + specifically refreshing of page + */ + e.preventDefault() + const { + firstName, + lastName, + title, + email, + tel, + dateOfBirth, + favoriteColor, + weight, + country, + gender, + bio, + file, + skills, + } = formData + + const formattedSkills = [] + for (const key in skills) { + console.log(key) + if (skills[key]) { + formattedSkills.push(key.toUpperCase()) + } + } + const data = { + firstName, + lastName, + title, + email, + tel, + dateOfBirth, + favoriteColor, + weight, + country, + gender, + bio, + file, + skills: formattedSkills, + } + /* + the is the place where we connect backend api + to send the data to the database + */ + console.log(data) + } + + // accessing the state value by destrutcturing the state + const { + firstName, + lastName, + title, + country, + email, + tel, + dateOfBirth, + favoriteColor, + weight, + gender, + bio, + } = formData + return ( +
+

Add Student

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

Gender

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

Select your skills

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