From 3f444666e423bc0aaf1fa272dff5b210521a8f8e Mon Sep 17 00:00:00 2001 From: asabeneh Date: Tue, 13 Oct 2020 07:22:39 +0300 Subject: [PATCH] polishing --- 12_Day_Forms/12_forms.md | 45 ++++++++++++++++++++++++++++++---------- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/12_Day_Forms/12_forms.md b/12_Day_Forms/12_forms.md index 6bf6a2cf5f..141fde4e8a 100644 --- a/12_Day_Forms/12_forms.md +++ b/12_Day_Forms/12_forms.md @@ -106,7 +106,11 @@ class App extends Component { } render() { - // accessing the state value and this value will injected to the input in the value attribute + /* + accessing the state value and + this value will injected to the input in the value attribute + */ + const firstName = this.state.firstName return (
@@ -139,7 +143,7 @@ In this section we will develop a small form which collect user information. Our import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Component { - // declaring state + // declaring initial state state = { firstName: '', lastName: '', @@ -159,7 +163,6 @@ class App extends Component { this.setState({ [name]: value }) } handleSubmit = (e) => { - /* e.preventDefault() stops the default behavior of form element @@ -290,12 +293,15 @@ class App extends React.Component { } handleChange = (e) => { /* - // we can get the name and value like this but we can also destructure it from e.target + 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] 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 + /* + [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') { this.setState({ @@ -309,7 +315,11 @@ class App extends React.Component { } } handleSubmit = (e) => { - // stops the default behavior of form element specifically refreshing of page + /* + e.preventDefault() + stops the default behavior of form element + specifically refreshing of page + */ e.preventDefault() const { firstName, @@ -347,7 +357,10 @@ class App extends React.Component { file, skills: formattedSkills, } - // the is the place where we connect backend api to send the data to the database + /* + the is the place where we connect backend api + to send the data to the database + */ console.log(data) } @@ -624,12 +637,15 @@ class App extends Component { } handleChange = (e) => { /* - // we can get the name and value like this but we can also destructure it from e.target + 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] 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 + /* + [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') { this.setState({ @@ -660,7 +676,11 @@ class App extends Component { return errors } handleSubmit = (e) => { - // stops the default behavior of form element specifically refreshing of page + /* + e.preventDefault() + stops the default behavior of form element + specifically refreshing of page + */ e.preventDefault() const { @@ -699,7 +719,10 @@ class App extends Component { file, skills: formattedSkills, } - // the is the place where we connect backend api to send the data to the database + /* + the is the place where we connect backend api + to send the data to the database + */ console.log(data) }