CODEWITHSUNDEEP
reactjsredux
dudd
dudd

Reputation: 372

Reactjs Hiding form clicking on button from another component

I have written a crud application and it works great! I have successfully implemented when people click on ADD NEW button form will be visible

Now i am facing challange to hide form when people click on SAVE button, coz, the SAVE another component.

Here you go for my Form.js File:

import React, { Fragment } from "react"
import { connect } from 'react-redux'
const axios = require('axios');

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

  submit(event) {
    const data = {
      name: this.state.name, 
      age: this.state.age, 
      email: this.state.email
    };
    if (this.props.isEdit) {
      data.id = this.props.selectedData.id;
      axios.put('http://127.0.0.1:8000/api/v1/employee/' + data.id + '/', data)
      .then((response) => {
        this.props.dispatch({ type: 'EDIT_POST', response });
      });
    } else {
      // generate id here for new emplyoee
      axios.post('http://127.0.0.1:8000/api/v1/employee/', data)
      .then((response) => {
        this.props.dispatch({ type: 'ADD_POST', response });
      });
    }
  }

  onHandleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  componentDidUpdate(prevProps) {
    if (prevProps.selectedData.age !== this.props.selectedData.age) {  //Check on email, because email is unique
      this.setState({ name: this.props.selectedData.name, age: this.props.selectedData.age })
    }
  }



  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>

        <button onClick={(event) => this.submit(event)} type="button">
          {this.props.isEdit ? 'Update' : 'SAVE'}
        </button>

      </form>
    );
  }
}

export default connect(null)(Form);

And this is my Home.js file:

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

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
           selectedData: {name: '', age: ''},
           isEdit: false,
           isFormVisible: false,
        };
    }

    selectedData = (item) => {
       this.setState({selectedData: item,isEdit:true, isFormVisible: true})
    }
    render() {
        return (
            <React.Fragment>   
              {this.state.isFormVisible && <div>
                <Form selectedData={this.state.selectedData} isEdit={this.state.isEdit}/> 
              </div>}

              {!this.state.isFormVisible && 
            <button onClick={() => this.setState({isFormVisible: true})}>ADD NEW</button>}       
            <table>
                <Table selectedData={this.selectedData} />
            </table>
            </React.Fragment>
        );
    }
}
export default Home;

Everything is working fine, only issue is hiding the form when i click on SAVE button.

Can anyone help to hide the form clicing on SAVE button?

Upvotes: 0

Views: 80

Answers (2)

Rohit Kashyap
Rohit Kashyap

Reputation: 1592

Inside your Home.js, create a function that does the state change for you and pass it down as a prop to the Form Component.

Home.js

changeFormState = () => {
   this.setState({ isFormVisible: !isFormVisible });
}
<Form  
  changeFormState={this.changeFormState} 
  selectedData={this.state.selectedData} 
  isEdit={this.state.isEdit}
/>

Form.js

<button 
   onClick={(event) => { this.props.isEdit ? this.submit(event) : 
   this.props.changeFormState() }} type="button"
>
    {this.props.isEdit ? 'Update' : 'SAVE'}
</button>

Upvotes: 1

AngelSalazar
AngelSalazar

Reputation: 3113

JS Update 

submit(event) {
    const data = {
      name: this.state.name, 
      age: this.state.age, 
      email: this.state.email
    };
    if (this.props.isEdit) {
      data.id = this.props.selectedData.id;
      axios.put('http://127.0.0.1:8000/api/v1/employee/' + data.id + '/', data)
      .then((response) => {
        // Fire an event
        this.props.onSave && this.props.onSave();
        this.props.dispatch({ type: 'EDIT_POST', response });
      });
    } else {
      // generate id here for new emplyoee
      axios.post('http://127.0.0.1:8000/api/v1/employee/', data)
      .then((response) => {
        // Fire an event
        this.props.onSave && this.props.onSave();
        this.props.dispatch({ type: 'ADD_POST', response });
      });
    }
  }

  hideForm = () => { this.setState({ isFormVisible: false }); }

JSX Update

<Form 
  selectedData={this.state.selectedData} 
  isEdit={this.state.isEdit}
  onSave={this.hideForm}
/>

Upvotes: 1

Related Questions