I am trying React.js for the first time in trying to build this web app. I am getting Cannot read property 'setState' of null on the specified line below. I've been trying to figure out why for the past few hours and cannot seem to figure it out. Any help would be greatly appreciated.
MyModal.jsx
import React from 'react';
import { Modal, Button, ButtonToolbar } from 'react-bootstrap';
export default class MyModal extends React.Component {
constructor(props) {
super(props);
this.state = {show: false};
}
showModal() {
this.setState({show: true});
}
hideModal() {
this.setState({show: false});
}
render() {
return (
<ButtonToolbar>
<Button bsStyle="primary" onClick={this.showModal}>
Launch demo modal
</Button>
<Modal
{...this.props}
show={this.state.show}
onHide={this.hideModal}
dialogClassName="custom-modal"
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-lg">Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Wrapped Text</h4>
<p>Blah</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.hideModal}>Close</Button>
</Modal.Footer> // Chrome inspector says it errors on this line
</Modal>
</ButtonToolbar>
);
} // end render function
} // end export default
bind your component class methods inside the constructor() (binding inside constructor is better than binding inside render() for performance sake):
constructor(props) {
super(props);
this.state = {show: false};
this.showModal = this.showModal.bind(this);
this.hideModal = this.hideModal.bind(this);
}
Related
OnClick event, onClick={this.props.onHide} I'm being able to hide the Modal but I also need to call the save function. If I call the save function along with the props then the save function is called but the Modal doesn't close. Any help is appreciated.
Component 1 -
import * as React from 'react';
import Modal from '../Modal/Modal';
export default class Example extends React.Component<IExampleProps, {}>{
constructor(public props: IAboutProps, public state: any) {
super(props);
this.state = {
helpModalShow: false,
};
}
public render(): React.ReactElement<IExampleProps> {
let helpModalClose = () => this.setState({ helpModalShow: false });
return (
<Modal
show={this.state.helpModalShow}
onHide={helpModalClose}
/>
);
}
}
Modal Component -
import * as React from 'react';
export default class Modal extends React.Component<IModalProps, {}>{
constructor(public props: IModalProps, public state: any) {
super(props);
this.state = {
};
}
public render(): React.ReactElement<IQuestionsModalProps> {
return (
<Modal
{...this.props}
//size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title>
Ask a Question
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Row>
<Col>
<button type="button" onClick=
{this.props.onHide}>Submit</button>
</Col>
</Row>
</Modal.Body>
</Modal>
);
}
}
then this should work call a function in onClick like this
save = () => {
//your save logic
this.props. onHide()
}
<Col>
<button type="button" onClick=
{this.save}>Submit</button>
</Col>
i have a modal, but dont recognize their styles, what is the matter?, why dont recognize the styles? i need to import an other dependecy?
import React,{Component} from 'react'
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';
class CustomModal extends Component{
constructor(props) {
super(props);
this.state = {
show: false
};
this.handleClose = this.handleClose.bind(this);
this.handleShow = this.handleShow.bind(this);
}
handleClose (){
this.setState({ show: false });
};
handleShow (){
this.setState({ show: true });
};
render() {
return(
<div>
<Button variant="primary" onClick={this.handleShow}>Update</Button>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Update</Modal.Title>
</Modal.Header>
<Modal.Body>...</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>Close</Button>
<Button variant="primary">Save</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
export default CustomModal;
i am using Button but my button never is painting
I simply changed the way you have imported the Components and it started working.
Changed the import to
import { Modal, Button } from "react-bootstrap";
From
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';
Live demo here
https://codesandbox.io/s/react-bootstrap-x0ix0?fontsize=14&hidenavigation=1&theme=dark
I'm just starting to learn React. I've got a modal component (that's basically a wrapper for react-bootstrap's Modal component). The idea is to have a "Feedback" modal that I can include in various places. This approach isn't working, and I don't know what I don't know :/
Below is a quick example of what I mean / how I'm trying to display my modal component
import React, { Component } from 'react'
import Modal from 'react-bootstrap/Modal'
import Button from "components/button/button"
export class BaseModal extends Component {
constructor(props) {
super(props);
this.state = { show: false };
}
toggleModal() {
this.setState({ show: !this.state.show })
}
render() {
if (!this.props.show) {
return null;
};
return (
<>
<Modal show={this.state.show}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.toggleModal}>
Close
</Button>
<Button variant="primary" onClick={this.toggleModal}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
)
}
}
A simple page like this - clicking this button doesn't do anything (React dev tools show no BaseModal node in the vdom)
import React, { Component } from 'react'
import Button from "components/button/button"
import BaseModal from "components/modals/baseModal"
export class ButtonDocs extends Component {
render() {
<Button value="Open Modal" onClick={BaseModal.toggleModal} />
}
}
You can't just import a Component and then call a method on it, because you aren't actually rendering it anywhere.
What you need to do is render the Component, and then if you want to control the state of one component from another you need to "lift state up" and pass the state and any methods needed to the modal component as props. Something like this:
Modal Component
import React, { Component } from 'react'
import Modal from 'react-bootstrap/Modal'
import Button from "components/button/button"
export class BaseModal extends Component {
render() {
if (!this.props.show) {
return null;
};
return (
<>
<Modal show={this.state.show}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.props.toggleModal}>
Close
</Button>
<Button variant="primary" onClick={this.props.toggleModal}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
)
}
}
Button Docs
import React, { Component } from 'react'
import Button from "components/button/button"
import BaseModal from "components/modals/baseModal"
export class ButtonDocs extends Component {
constructor(props) {
super(props);
this.state = { show: false };
}
toggleModal() {
this.setState({ show: !this.state.show })
}
render() {
<Button value="Open Modal" onClick={this.toggleModal} />
<BaseModal show={this.state.show} toggleModal={this.toggleModal} />
}
}
I am getting kind of desperated. I want to make an modal dialog in reactjs using bootstrap. I have installed the module with npm and imported it in my code. I tried a simple example:
import React from 'react';
import {Modal, Button } from 'react-bootstrap';
class Config extends React.Component {
constructor(){
super();
this.state = {
show: false
}
this.handleHide = this.handleHide.bind(this);
}
handleHide() {
this.setState({ show: false });
}
render(){
return ( <div>
<Button
bsStyle="primary"
bsSize="large"
onClick={() => this.setState({ show: true })}
>
Launch modal
</Button>
<Modal show={this.state.show} onHide={this.handleHide}>
<Modal.Header >
Header
</Modal.Header>
<Modal.Body>
Text
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handleHide}>Close</Button>
</Modal.Footer>
</Modal>
</div>)
}
}
export default Config;
I dont get any error, but I also cant see anything, if I click on the button. I looked with the Chrome developer tool through the Elements and I can see the modal there, which is confusing.
Does someone has an idea what is wrong?
This worked for me it's almost identical to your example. However, instead of using one function to handle the state by itself, I used 2 functions for the handleClose and HandleShow.
import React from 'react';
import { Link } from 'react-router-dom';
import { Modal, Button } from 'react-bootstrap';
class Header extends React.Component {
constructor(props){
super(props);
this.handleClose = this.handleClose.bind(this);
this.handleShow = this.handleShow.bind(this);
this.state = {
show: false
}
}
handleClose(){
this.setState({
show:false
});
}
handleShow(){
this.setState({
show:true
});
}
render(){
// console.log(this.state);
return (
<div className="header-container">
<nav className="navbar navbar-dark bg-dark">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/Contact">Contact</Link></li>
<li><Button className="login-button" onClick={this.handleShow}>LOGIN</Button></li>
</ul>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal Header</Modal.Title>
</Modal.Header>
<Modal.Body>
Modal Body
</Modal.Body>
</Modal>
</nav>
</div>
)
}
}
export default Header;
I'm trying to create a MessageBox(Modal Box) element which gets inputs to form the Modal Box, The close method in MessageBox somehow doesn't call the parent close and inturn get the Modal disappear, any help please ??
export default class MessageBox extends Component{
constructor(props) {
super(props);
this.close = this.close.bind(this);
}
close(){
this.props.callbackParent;
}
render(){
return (
<div>
<Modal show={this.props.visibility} onHide={this.close}>
<ModalHeader closeButton>
<ModalTitle>{this.props.msgHeader}</ModalTitle>
</ModalHeader>
<ModalBody>{this.props.msgBody}</ModalBody>
</Modal>
</div>
);
}
}
export default class Product extends Component {
constructor(props) {
super(props);
this._initState = {
showModal: false
}
this.state = this._initState;
this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
open(){
this.setState(
{ showModal: true }
);
}
close(){
this.setState(
{ showModal: false }
);
}
render(){
return (
<div>
<Button bsStyle="primary" bsSize="large" onClick={this.open}>
Go!!!
</Button>
<MessageBox visibility={this.state.showModal} msgHeader='Header goes here ...' msgBody='Overlay message body goes here ..' callbackParent={this.close}/>
</div>
);
}
};
It seems you are missing the parenthesis on in the close method of MessageBox.
this.props.callbackParent;
should be
this.props.callbackParent();
(thx to #azium) for the answer.
I got it working by this
export default class MessageBox extends Component{
constructor(props) {
super(props);
}
render(){
return (
<div>
<Modal show={this.props.visibility} onHide={this.props.callbackParent}>
<ModalHeader closeButton>
<ModalTitle>{this.props.msgHeader}</ModalTitle>
</ModalHeader>
<ModalBody>{this.props.msgBody}</ModalBody>
<ModalFooter>
<Button onClick={this.props.callbackParent}>Close</Button>
</ModalFooter>
</Modal>
</div>
);
}
}