Reactjs: Show edit form onClick

Question

I wrote a reactjs crud app and it works great. i have implement a form it works for both add and update when i click on ADD NEW, the form appears but i am trouble in implement it on edit, i want when i click on edit button, then form should be shown.

here you go for my home.js file:

import React from "react"
import Table from "./table"
import Form from "./form"

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            current: 'SAVE', // button name
            employees: [{name: 'jhon', age: '23', email: 'a@a'}, {name: 'doe', age: '24', email: 'b@a'}],
            currentEmp: {},
            isFormVisible: false
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.onDelete = this.onDelete.bind(this);
        this.setIndex = this.setIndex.bind(this);
    }

    onSubmit(name, age, email, index=null) {
        if(!index && this.state.current == 'SAVE'){
            this.setState({ employees: [...this.state.employees, { name: name, age: age, email: email }] });
        }
        else if(this.state.current == 'Update'){
            this.setState({
                employees: this.state.employees.map((emp,index) => index === this.state.index ? {name,age,email} : emp),
                current: 'SAVE',
                currentEmp:{name:'',age:'',email:''}
            });
        }
        else{
            this.setState({
                currentEmp: {name:'',age:'',email:''},
                current: 'SAVE',
            });
        }
    };

    setIndex(index){
        var emp = this.state.employees[index];
        emp.index = index;
        this.setState({
            currentEmp: emp,
            current: 'Update',
            index  //set index in state
        });
    }


    // delete employee
    onDelete(event, index) {
        this.setState({
            employees: this.state.employees.filter((item, itemIndex) => (index != itemIndex)),
        });
    };

    render() {
        return (
            <React.Fragment>
              <h1>Employee Information System</h1>

              {this.state.isFormVisible && <div>
              <Form
                currentEmp={this.state.currentEmp}
                submitMe={this.onSubmit}
                currentButtonName={this.state.current} />
              </div>
              }

              <button onClick={() => this.setState({isFormVisible: true})}>ADD NEW</button>

            <hr/>
            <table className="table table-striped table-dark">
                <Table onUpdateTry={this.edit} editThis={this.setIndex} employees={this.state.employees} deleteMe={this.onDelete} />
            </table>
            <p className="test">Ignore this please ! Just showed if sass works or not</p>

            </React.Fragment>
        );
    }
}
export default Home;

and this is my table.js file

import React, {Fragment} from "react"


class Table extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            employees: this.props.employees
        };

        //this.onDelete = this.onDelete.bind(this);
        this.onEdit = this.onEdit.bind(this);
    }
    onEdit(event, index){
        if(this.props.editThis){
            this.props.editThis(index);
        }
    }

    render() {
        return (
            <Fragment>
                <thead>
                    <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Age</th>
                    <th scope="col">Email</th>
                    <th scope="col">EDIT</th>
                    <th scope="col">DELETE</th>
                    </tr>
                </thead>
                <tbody>
                {this.props.employees.map((item, index) => (
                    <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td>{item.email}</td>
                        <td>
                            <button
                                type="button"
                                onClick={(event) => this.onEdit(event, index)}
                                className="btn btn-primary btn-sm">EDIT
                            </button>
                        </td>
                        <td>
                            <button
                                onClick={(event) => this.props.deleteMe(event, index)}
                                type="button" className="btn btn-danger btn-sm">DELETE
                            </button>
                        </td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

export default Table;

and this is my form.js file:

import React, { Fragment } from "react"

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: '', age: '', email: ''};
        this.onHandleChange = this.onHandleChange.bind(this);
        this.submit = this.submit.bind(this);
    }

    submit(event, name, age, email) {
        if (this.props.submitMe) {
            this.props.submitMe(name, age, email);
        }
        this.setState({name: '', age: '', email: ''}); // clear form after click on submit
    }

    onHandleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }
    componentDidUpdate(prevProps){
        if(prevProps.currentEmp != this.props.currentEmp){
            this.setState({
                index: this.props.currentEmp.index,
                name: this.props.currentEmp.name,
                age: this.props.currentEmp.age,
                email: this.props.currentEmp.email,
            });
        }
    }

    render() {
        return (
            <form>
                <div className="form-group">
                    <input onChange={(event) => this.onHandleChange(event)} value={this.state.name} name="name" type="text" />
                </div>

                <div className="form-group">
                    <input onChange={(event) => this.onHandleChange(event)} value={this.state.age} name="age" type="number"/>
                </div>

                <div className="form-group">
                    <input onChange={(event) => this.onHandleChange(event)} value={this.state.email}  name="email" type="text"/>
                </div>

                <button onClick={(event) => this.submit(event, this.state.name, this.state.age, this.state.email)} type="button">{this.props.currentButtonName}</button>

                <button onClick={() => this.setState({isFormVisible: false})}>HIDE ME</button>
            </form>
        );
    }
}

export default Form;

Can anyone help me how to show the div clicking on the edit button?

Answer 1

You can make use of setIndex function, you just need to add isFormVisible: true to setState of this function as below

setIndex(index){
        var emp = this.state.employees[index];
        emp.index = index;
        this.setState({
            isFormVisible: true  //This will make form visible
        }, () => this.setState({
            currentEmp: emp,
            current: 'Update',
            index,  //set index in state
        }));
    }

Demo