React JS Input From Shotcut

 import React, { useState } from 'react';

const Forms = () => {


    const [names, setnames] = useState({

        fname: '',

        lname: '',

        email: ''

    });



    const submitting = (e) => {

        e.preventDefault();       //revent default events

    }

    const inputEvent = (e) => {


        //    const names2 = e.target.name;

        //    const value = e.target.value;


        const {name, value} = e.target;                //array destructure


        setnames((preValue) => {


            return {

                ...preValue,            //using spred operator

                [name]: value,          //change the value where name is name


            };



            // if (names2 === 'fname') {

            //     return{

            //         fname: value,

            //         lname: preValue.lname,

            //         email: preValue.email

            //     }


            // }

            // else if(names2 === 'lname'){

            //     return{

            //         fname: preValue.fname,

            //         lname: value,

            //         email: preValue.email

            //     }


            // }

            // else if(names2 === 'email'){

            //     return{

            //         fname: preValue.fname,

            //         lname: preValue.lname,

            //         email: value

            //     }


            // }

        });


    }




    /* const clicked = () => {

         setfullname(names);

         setnewname(lastname);

     }*/


    return (

        <>

            <div className="col-6 pt-5 m-auto">

                <form onSubmit={submitting}>

                    <h1 className="mb-3 text-center">Hello {names.fname} {names.lname}</h1>

                    <p className="text-center">{names.email}</p>

                    <input className="form-control mb-3" type="text" placeholder="Enter Your Name" onChange={inputEvent} name="fname" />

                    <input className="form-control mb-3" type="text" placeholder="Enter Your Name" onChange={inputEvent} name="lname" />

                    <input className="form-control mb-3" type="email" placeholder="Enter Your Email" onChange={inputEvent} name="email" />

                </form>

            </div>

        </>

    )

}


//onchange is a input event listener in React. 


export default Forms;



//react has two types of components - 1. cotrolled components 2. un-controlled components

মন্তব্যসমূহ

একটি মন্তব্য পোস্ট করুন

এই ব্লগটি থেকে জনপ্রিয় পোস্টগুলি

React Js Cards (Props, Array, Mapping, Rendaring)

 App.js import Card from './card'; import './App.css'; import Movie from './Movie'; const movies = (val) =>{   return(     <>     <Card img={val.img} title={val.title} Category={val.Category}/>     </>   ) } function App() {   return (     <>     {Movie.map(movies)}            </>   ); } //map function is used to create a array of each array elements.  export default App; Card.js import React from 'react' export default function card(props) {   //props means properties. We can create custom attributes using props.     return (         <div className="card">             <img src={props.source} />             <div className="container">                 <h4><b>{props.title}</b...
আরও পড়ুন

React JS - Hooks

 App.js import './App.css'; import Cntr from './Cntr'; function App() {  return(    <>    <Cntr/>    </>  ); } export default App; Cntr.js import React, {useState} from 'react'; //use state is used to change the sate of a varibale means update a value with a eventlistner in our DOM.  export default function Cntr() {     const [count , setCount] = useState(0);   // const[variable , update value fuction] = useState (variable initialization);         const valinc = () =>{              setCount(count+1);   //set setcount function     }     return (         <div className="col-6 m-auto mt-4">               <h1 className="text-center">{count}</h1>               <p className="text-center"><button className...
আরও পড়ুন

React Js - Form Submit, Input

 App.js import React from "react"; import './App.css'; import ReactDom from "react-dom"; import Forms from './froms'; function App() {  return(    <>    <Forms/>    </>  ); } export default App; forms.js import React, { useState } from 'react'; const Forms = () => {     const [names, setnames] = useState("");     const [fullnames, setfullname] = useState("");     const submitting = (e) =>{         e.preventDefault();       //revent default events     }     const inputEvent = (e) => {         console.log(e.target.value);         setnames(e.target.value);     }     const clicked = () => {         setfullname(names);     }     return (         <>             <div classNam...
আরও পড়ুন