add edit delete in reactjs forms example

React Edit Multiples Input Components Example

The input elements often have a property called name, age, mobile, address, and pincode. We can access these properties from the event object that we receive from an event handler.

Explore to Understand  - React Lifecycle Components

Write a generalized change handler:
    handleChange = (eventpropertyName=> {
        const detail = this.state.detail;
        detail[propertyName] = event.target.value;
        this.setState({ detail: detail });
    }

As an Example,
import React, { Component } from 'react'

export default class UserDetail extends Component {
    constructor(props) {
        super(props);
        this.state = this.props.location.state;
    }

    handleChange = (eventpropertyName=> {
        const detail = this.state.detail;
        detail[propertyName] = event.target.value;
        this.setState({ detail: detail });
    }

    render() {
        return (
            <>
                <div>
                    <input type="text" onChange={this.handleChange.bind(this'name')} value={this.state.detail.name} />
                    <input type="text" onChange={this.handleChange.bind(this'age')} value={this.state.detail.age} />
                    <input type="text" onChange={this.handleChange.bind(this'mobile')} value={this.state.detail.mobile} />
                    <input type="text" onChange={this.handleChange.bind(this'address')} value={this.state.detail.address} />
                    <input type="text" onChange={this.handleChange.bind(this'pincode')} value={this.state.detail.pincode} />
                    <button type="button" className="btn btn-primary" onClick={this.updateDetail}>Update</button>
                </div>
            </>
        )
    }
}

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^