Scribd Logo
Upload

Welcome to Scribd!

  • New Text Document

    Uploaded by

    Fahim Hasan
    12 views2 pages
    This document defines a React form component with input fields for title, amount, and date. It uses the useState hook to manage the form state and input change handlers to update it. The form submission handler collects the state into an object and returns it. The component renders the form and passes the state down to an Output component to display the current form values.

    Original Description:

    Original Title

    New Text Document (2)

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document defines a React form component with input fields for title, amount, and date. It uses the useState hook to manage the form state and input change handlers to update it. The form submission handler collects the state into an object and returns it. The component renders the form and passes the state down to an Output component to display the current form values.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    12 views2 pages

    New Text Document

    Uploaded by

    Fahim Hasan
    This document defines a React form component with input fields for title, amount, and date. It uses the useState hook to manage the form state and input change handlers to update it. The form submission handler collects the state into an object and returns it. The component renders the form and passes the state down to an Output component to display the current form values.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    import React, { useState } from "react";

    import "./Form.scss";
    import Output from "../Output/Output";

    const From = () => {


    const [title , setTitle] = useState('')
    const [amount , setAmount] = useState('')
    const [date , setDate] = useState('')
    const titleInputChangeHandler=(e)=>{
    setTitle(e.target.value)

    }
    const amountInputChangeHandler=(e)=>{
    setAmount(e.target.value)

    }
    const dateInputChangeHandler=(e)=>{
    setDate(e.target.value)

    const formOnSubmitHandler=(e)=>{
    e.preventDefault()
    const collection = {
    title: title,
    amount: amount,
    date: date,
    }
    return collection
    };

    function submitButtonClickHandler(){

    return (
    <div className="form-container">
    <form onSubmit={formOnSubmitHandler}>
    <div>
    <h3 className="title">What you buied?</h3>
    <input
    type="text"
    value={title}
    className=""
    onChange={titleInputChangeHandler}/>
    </div>
    <div className="amount">
    <h3>How much you expensed?</h3>
    <input
    type="text"
    value={amount}
    className=""
    onChange={amountInputChangeHandler} />
    </div>
    <div className='date'>
    <h3>When you buied?</h3>
    <input
    type="date"
    value={date}
    className=""
    onChange={dateInputChangeHandler} />
    </div>
    <input type="submit" value="submit"
    onClick={submitButtonClickHandler} />
    </form>
    <Output
    title={title}
    amount={amount}
    date={date}
    />
    </div>
    );
    };
    export default From;

    You might also like