Ads Top

How to submit data using react?

How to create a form in react?
React 16.8 added new features in his library as Hooks.  Where we will use “use” keyword then it’s indicate that this hook of the react as “useState()”, “useRef()” etc and not required that create state full component you can use the stateless component as given below example.

React get form values on submit:
Need to create a new project because the need to update react version 16.8 or you can update only “node_modules” then you will find a newly updated library of the hooks. Now I am creating some form using react hooks Or without Hooks.


Form with useState():
import React, {useState} from 'react'
export default () => {
    const [fName, setfName] = useState('');
    const [lName, setlName] = useState('');
    const [phone, setPhone] = useState('');
    const [email, setEmail] = useState('');

    const submitValue = () => {
        const frmdetails = {
            'First Name' : fName,
            'Last Name' : lName,
            'Phone' : phone,
            'Email' : email
        }
        console.log(frmdetails);
    }

    return(
        <>
        <hr/>
        <input type="text" placeholder="First Name" onChange={e => setfName(e.target.value)} />
        <input type="text" placeholder="Last Name" onChange={e => setlName(e.target.value)} />
        <input type="text" placeholder="Phone" onChange={e => setPhone(e.target.value)} />
        <input type="text" placeholder="Email" onChange={e => setEmail(e.target.value)} />
        <button onClick={submitValue}>Submit</button>
        </>
    )
}

Form with State Full Component:
import React, {Component} from 'react'

export default class Formstatefull extends Component{
    state = {
        userName:"",
        userEmail:"",
        userPhone: ""
    }
    pushDetails = (evt) => {
        if(evt.target.id === "userName"){
            this.setState({userName: evt.target.value})
        }
        else if(evt.target.id === "userEmail"){
            this.setState({userEmail:evt.target.value})
        }
        else if(evt.target.id === "userPhone"){
            this.setState({userPhone: evt.target.value})
        }
    }
    submitData = () =>{
        let userDetails = {
            name: this.state.userName,
            email: this.state.userEmail,
            phone: this.state.userPhone
        }
        console.log(userDetails)
    }

    render(){
        return(
            <>
                <table cellPadding="5">
                <tbody>
                 <tr>
                     <td>Name: </td>
                     <td><input type="text" id="userName" value={this.state.userName} onChange={this.pushDetails} /></td>
                 </tr>
                 <tr>
                     <td>Email: </td>
                     <td><input type="text" id="userEmail" value={this.state.userEmail} onChange={this.pushDetails} /></td>
                 </tr>
                 <tr>
                     <td>Phone No.: </td>
                     <td><input type="text" id="userPhone" value={this.state.userPhone} onChange={this.pushDetails  } /></td>
                 </tr>
                 <tr>
                     <td></td>
                     <td><button onClick={this.submitData}> Save</button></td>
                 </tr>
                 </tbody>
             </table>
            </>
        )
    }
}

Form with State Full Component in switch():
import React, {Component} from 'react'

export default class StatefullSwitchForm extends Component{
    state = {
        name:"",
        email:"",
        phone: ""
    }
    getData = (evt) => {
        switch(evt.target.id){
            case "nameId":
                this.setState({name:evt.target.value})
            break;
            case "emailId":
                this.setState({email:evt.target.value})
            break;
            case "phoneId":
                this.setState({phone: evt.target.value})
            break;

        }       
    }
    submitDetails = () =>{
        let userInfo = {
            name: this.state.name,
            email: this.state.email,
            phone: this.state.phone
        }
        console.log(userInfo)
    }

    render(){
        return(
            <>
                <h3>Contact Us</h3>
                <h4>With State Full Component and Use Switch</h4>
                <table cellPadding="5">
                <tbody>
                 <tr>
                     <td>Name: </td>
                     <td><input type="text" id="nameId" value={this.state.name} onChange={this.getData} /></td>
                 </tr>
                 <tr>
                     <td>Email: </td>
                     <td><input type="text" id="emailId" value={this.state.email} onChange={this.getData} /></td>
                 </tr>
                 <tr>
                     <td>Phone No.: </td>
                     <td><input type="text" id="phoneId" value={this.state.phone} onChange={this.getData} /></td>
                 </tr>
                 <tr>
                     <td></td>
                     <td><button onClick={this.submitDetails}> Save</button></td>
                 </tr>
                 </tbody>
             </table>
            </>
        )
    }
}

Form with useRef():
import React, {useRef} from 'react'

export default () => {
    const fName = useRef();
    const email = useRef();
    const phone = useRef();
   
    const submitDetails = () =>{
        let userInfo = {
            name: fName.current.value,
            email: email.current.value,
            phone: phone.current.value
        }
        console.log(userInfo)
    }

        return(
            <>
                <h3>Contact Us</h3>
                <h4>React form with useRef()</h4>
                <table cellPadding="5">
                <tbody>
                 <tr>
                     <td>Name: </td>
                     <td><input type="text" ref={fName} id="userName" /></td>
                 </tr>
                 <tr>
                     <td>Email: </td>
                     <td><input type="text" ref={email} id="userEmail" /></td>
                 </tr>
                 <tr>
                     <td>Phone No.: </td>
                     <td><input type="text" ref={phone} id="userPhone" /></td>
                 </tr>
                 <tr>
                     <td></td>
                     <td><button onClick={submitDetails}> Save</button></td>
                 </tr>
                 </tbody>
             </table>
               
            </>
        )
}

Note:

export default (): export default means you can give name your component as you wish. import CostomComponentName from './view/formHooks/formhooksNew'

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.