Clicking a button to open dialog in ReactJS

Question

I'm working with React MDL library, and I used pre-defined components like FABButton

<FABButton>
  <Icon name="add"/>
</FABButton>

And it shows the button as in the image bellow:

Now, what I want is showing a dialog with the + icon... not as what happens here:

This happened after this code:

<FABButton>
  <AddingProject />
  <Icon name="add" />
</FABButton>

The class of dialog is as follows:

class AddingProject extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleOpenDialog = this.handleOpenDialog.bind(this);
    this.handleCloseDialog = this.handleCloseDialog.bind(this);
  }
  handleOpenDialog() {
    this.setState({
      openDialog: true
    });
  }

  handleCloseDialog() {
    this.setState({
      openDialog: false
    });
  }
  render() {
    return (
      <div>
        <Button colored onClick={this.handleOpenDialog} raised ripple>
          Show Dialog
        </Button>
        <Dialog open={this.state.openDialog} onCancel={this.handleCloseDialog}>
          <DialogTitle>Allow data collection?</DialogTitle>
          <DialogContent>
            <p>
              Allowing us to collect data will let us get you the information
              you want faster.
            </p>
          </DialogContent>
          <DialogActions>
            <Button type="button">Agree</Button>
            <Button type="button" onClick={this.handleCloseDialog}>
              Disagree
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

export default AddingProject;

The above code is with the required import statements

You should move the logic of opening/closing the dialog outside of your dialog component and open it by the onClick prop of your <FABButton>. — Dyo
– Dyo, Commented Sep 12, 2018 at 10:32
I'v tried things before like this: <FABButton onClick={() => AddingProject()}> <Icon name="add" /> </FABButton> but some bugs occurred — Meqdad Dev
– Meqdad Dev, Commented Sep 12, 2018 at 10:40

Meqdad Dev · Accepted Answer · 2018-09-19 17:08:28Z

This works with me....
First step: I added the component of the modal as follows:

<FABButton>
  <Icon name="add" />
</FABButton>
<ProjectModal>

Second step: I added this prop: visible for the component as here:

<ProjectModal visible={this.state.showDialog} />

And here you need to add showDialog to the states in your class with false.

state = {
  showDialog: false
};

Now, to step 3.
Third step: Add this part to your code, to be called when you click.

openModal = () => {
  this.setState({ showDialog: true });
};

On the other side, you need to implement onClick in the button as follows:

<FABButton onClick={this.openModal.bind(this)}>
  <Icon name="add" />
</FABButton>

Fourth step: In the modal/dialog class, you need to store the visible in a new state variable, which is here showDialogModal

constructor(props, context) {
super(props, context);
this.state = {
    showDialogModal: this.props.visible
  };
}

Now, you need to pass the changed state from the first class to the modal/dialog class, there are more than one option that React gives you, I used this one in fifth step. Fifth step: use this React event componentWillReceiveProps as below.

componentWillReceiveProps(nextProps) {
if (this.props.showDialogModal != nextProps.visible) {
  this.setState({
    showDialogModal: nextProps.visible
   });
  }
}

This will reflect any change in visible property from the first class to our new one here which is showDialogModal
Now in the render part, you need to check the docs of your components, here I started with React-Bootstrap. Sixth step: use the show property in your component.

<Modal show={this.state.showDialogModal} onHide={this.closeModal}>

onHide is for closing the dialog, which makes you need to implement this too.

closeModal = () => {
  this.setState({ showDialogModal: false });
};

Finally, in the closing button, add this:

<Button onClick={this.closeModal.bind(this)}>Close</Button>

Good luck.

It's important to say that I used React-bootstrap later, not the React-MDL components.

Collectives™ on Stack Overflow

Clicking a button to open dialog in ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related