react how to make call modal when button click event

Question

I want to make when i click button, show modal in different class. how to make it this?

import React, { Component } from 'react';
import addmodal from './addmodal';

class page extends Component {
  ...//skip
  handleAdd= () =>{
    //...how?
  }
  render(){
    return (
      <button onClick={this.handleAdd} > Add </button>
      )
   }
}


import React, { Component } from 'react';

class addmodal extends Component {
   // ... skip
  render(){
    return(
      <modal inOpen={this.state.isopen} >
        ...//skip
      </modal>
    )
  }
}

export default addmodal;

I can't call this addmodal... how to call modal?

sdabrutas · Accepted Answer · 2018-09-14 05:36:41Z

First, your variable naming is terrible. I fixed it for you here. The state that dictates if modal is open must be on the parent component since you have your trigger there. Then, pass it as props to the modal component. Here is the fixed code for you:

  import React, { Component } from 'react';
  import AddModal from './addmodal';

  class Page extends Component {
    constructor(){
      super();
      this.state = { isModalOpen: false };
    }
    ...//skip
    handleAdd= () =>{
      this.setState({ isModalOpen: true });
    }
    render(){
      return (
        <div>
          <button onClick={this.handleAdd} > Add </button>
          <AddModal isOpen={this.state.isModalOpen} />
        </div>
        )
    }
  }


  import React, { Component } from 'react';

  class AddModal extends Component {
    // ... skip
    render(){
      return(
        <modal inOpen={this.props.isOpen} >
          ...//skip
        </modal>
      )
    }
  }

  export default AddModal;

Nursefa Baybara · Accepted Answer · 2021-03-25 12:11:42Z

0

what about using trigger. Its very usefull.

<Modal trigger={ <button onClick={() => onCLickPay()} className={someting}>  When clicked here modal with show up</button>  }`enter code here` >

answered Mar 25, 2021 at 12:11

Nursefa Baybara

191 silver badge4 bronze badges

Collectives™ on Stack Overflow

react how to make call modal when button click event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related