Handling events on ReactJS

Question

I am new to ReactJS and trying to create a modal window component using ReactJS and ran into some trouble. I have a link to trigger the modal window and would like it the component to toggle between 'show' and 'hide' when clicked on the trigger link.

Below is my code:

The component where I am calling the ModalDialog component:

import React from 'react'; import styles from './Cover.css'; import withStyles from '../../decorators/withStyles'; import Link from '../../utils/Link'; import ModalDialog from '../ModalDialog'; import Avatar from './Avatar'; import { Button } from 'react-bootstrap'; @withStyles(styles) class Cover { render() { return ( <div className="Cover"> <a href="#" onClick={}></a> <ModalDialog heading="heading"> <p>Body</p> </ModalDialog> <div className="Cover-container"> <div> <Avatar username="hilarl" profession="Web Developer" location="New York, New York" status="I am here to protect my business, a bunch of kids are out to ruin me" /> <div className="Cover-submenu-container"> <div className="Cover-submenu-section"> . </div> <div className="Cover-submenu-section links"> <a href="#" className="Cover-submenu-link"> <i className="fa fa-twitter"></i> </a> </div> <div className="Cover-submenu-section connect-menu"> <Button bsStyle='primary' href="/follow" onClick={Link.handleClick}>Follow</Button> </div> </div> </div> </div> </div> ); } } export default Cover; The ModalDialog Component: import React from 'react'; import styles from './ModalDialog.css'; import withStyles from '../../decorators/withStyles'; import Link from '../../utils/Link'; import { Button } from 'react-bootstrap'; @withStyles(styles) class ModalDialog { render() { return ( <div className="Overlay"> <Modal heading={this.props.heading}> <div>{this.props.children}</div> </Modal> </div> ); } }; class Modal { render() { return ( <div className="Modal effect" > <h3>{this.props.heading}</h3> <div className="content"> {this.props.children} </div> </div> ); } }; export default ModalDialog;

I have set visibility to be hidden by default and trying to set a .show class to make it visible:

.Overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; opacity: 0; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; background: rgba(255,255,255,0.9); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .show ~ .Overlay { opacity: 1; visibility: visible; -webkit-backface-visibility: visible; -moz-backface-visibility: visible; backface-visibility: visible; }

Any help much appreciated. Thanks

Read your code and I'm wondering how the import works is it the ES6 import functionality? If yes how do you get it working in older browser? What does the @withStyles(styles) actually do? Thanks — Lem
– Lem, Commented Oct 9, 2015 at 5:05

gcedo · Accepted Answer · 2015-08-24 07:42:09Z

I learnt the hard way that in React it is better either to render or not to render. Changing the show/hide css class is sort of imperative/jQuerish mindset. Instead of telling React how to achieve hide/show, tell React what you want to render.

import Modal from './Modal'; class Cover extends React.Component { constructor() { this.state = { showModal: false }; } handleClick(event) { this.setState({ showModal: true }); } render() { return ( <div> <Modal show={this.state.showModal} /> <button onClick={this.handleClick.bind(this)}> Click me! </button> </div> ); } } class Modal extends React.Component { render() { if (this.props.show) { return (/* The modal panel */); } return null; } }

Thanks Edo, I am getting the error: Uncaught TypeError: this.setState is not a function My code is: constructor() { this.state = { showModal: false }; } handleClick(event) { this.setState({ showModal: true }); } <button onClick={this.handleClick.bind(this)}>Click me!</button> <ModalDialog heading="heading" show={this.state.showModal}></ModalDialog>
I have taken the example straight from facebook.github.io/react/docs/reusable-components.html, try to see if there's something that does not match.

Collectives™ on Stack Overflow

Handling events on ReactJS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related