ReactJS showing div element on click

Question

I am learning reactjs and javascript. I have written a reactjs crud app. it is working fine.

Now i want to implement my form should be show on click button ADD NEW

My component name is <Form>

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: {},
        };
        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'){
            var emp = this.state.employees;
            emp[this.state.index].name = name;  //use index from state
            emp[this.state.index].age = age;
            emp[this.state.index].email = email;
            this.setState({
                currentEmp: {},
                employees: emp,
                current: 'SAVE'
            });
        }
        else{
            this.setState({
                currentEmp: {},
                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>

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

              <button>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;

above script, you will see a button named ADD NEW and above it, you will see a component name Form inside a div

I Want when i click on the button, then the DIV should be shown.

Can anyone please help me to achieve this?

Sultan H. · Accepted Answer · 2019-08-04 16:35:37Z

1

You'll need to add formVisible: false to your state.
You will need to define this method:

handleFormVisibility = () => {
  this.setState({ formVisible: true });
}

PS: You will not be needing to bind(this) this method because it's declared using ES6 Arrow Function syntax.

Refactor:

  {
    this.state.formVisible ? (
      <Form
        currentEmp={this.state.currentEmp}
        submitMe={this.onSubmit}
        currentButtonName={this.state.current} />
    ) : null
  }
  <button onClick={this.handleFormVisibility}>ADD NEW</button>

PS: this.state.formVisible ? 'ReturnIfTrue' : 'ReturnIfFalse' this is a ternary operation, introduced in ES6, which will examin this.state.formVisible, if it's true we place what we want to return at the first statement ReturnIfTrue and the opposite at ReturnIfFalse.

If there is something that not clear please go ahead and ask.

answered Aug 4, 2019 at 16:35

Sultan H.

2,9383 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dudd Over a year ago

Thanks, you made my day

Sultan H. Over a year ago

@dudd I appreciate it!

Merci Dieu KIMPOLO · Accepted Answer · 2019-08-04 16:48:47Z

This can also help:

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: {},
        show:false
    };
    this.onSubmit = this.onSubmit.bind(this);
    this.onDelete = this.onDelete.bind(this);
    this.setIndex = this.setIndex.bind(this);
    this.handleShow=this.handleShow.bind(this)
}
handleShow(){
    this.setState({show:!this.state.show})
}
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'){
        var emp = this.state.employees;
        emp[this.state.index].name = name;  //use index from state
        emp[this.state.index].age = age;
        emp[this.state.index].email = email;
        this.setState({
            currentEmp: {},
            employees: emp,
            current: 'SAVE'
        });
    }
    else{
        this.setState({
            currentEmp: {},
            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.show?
           <div>
          <Form
            currentEmp={this.state.currentEmp}
            submitMe={this.onSubmit}
            currentButtonName={this.state.current} />
          </div>
          :null                   
          }


          <button onClick={()=>this.handleShow()}>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;

I wouldn't render the thing then css hide it, we shouldn't render things if we don't want to show them for the sake of Performance and better UI Development experience.

ravibagul91 · Accepted Answer · 2019-08-04 16:55:05Z

1

You can make use of state to conditionally render elements.

isFormVisible = false  //add this line to your existing state

And the condition,

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

And your button should be,

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

answered Aug 4, 2019 at 16:55

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

2 Comments

Sultan H. Over a year ago

Should have used ternary operator, instead of && because it returns false if the condition wasn't valid, false is not considered as a Valid React Element.

ravibagul91 Over a year ago

If the isFormVisible is false, then entire div will not get added to DOM.

Collectives™ on Stack Overflow

ReactJS showing div element on click

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related