getting error TypeError: this is undefined

Question

I want to open bootstrap modal,which is in my function Dashboard, but when i given its state this.state.show it gives me error this is undefined, here i have addd my whole code, can anyone please check my code and tell me why i am getting that error,

export class DashboardComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        show : false,
    }
  }
}
function Dashboard() {
  return (
  <section>
  <Modal.Dialog show={this.state.show}>
        <Modal.Header closeButton>
          <Modal.Title>Newsletter</Modal.Title>
        </Modal.Header>
        <Modal.Body>

          <Form>
            <Form.Group controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control type="email" placeholder="Enter email" />
              <Form.Text className="text-muted">
                We'll never share your email with anyone else.
              </Form.Text>
            </Form.Group>
          </Form>

        </Modal.Body>

        <Modal.Footer>
          <Button variant="secondary">Close</Button>
          <Button variant="primary">Save changes</Button>
        </Modal.Footer>
      </Modal.Dialog>
    </section>  
}
export default Dashboard;

Answer 1

I think you should do this :

export class DashboardComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        show : false,
    }
  }
  render(){
      return (
       <section>
         <Modal.Dialog show={this.state.show}>
         <Modal.Header closeButton>
           <Modal.Title>Newsletter</Modal.Title>
         </Modal.Header>
         <Modal.Body>
           <Form>
             <Form.Group controlId="formBasicEmail">
               <Form.Label>Email address</Form.Label>
               <Form.Control type="email" placeholder="Enter email" />
               <Form.Text className="text-muted">
                 We'll never share your email with anyone else.
               </Form.Text>
             </Form.Group>
           </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary">Close</Button>
          <Button variant="primary">Save changes</Button>
        </Modal.Footer>
      </Modal.Dialog>
    </section>  
  }
}

Answer 2

I think you've got your components mixed up. If your plan to create a component called Dashboard, you don't need to nest it inside another Component (DashboardComponent) in order for it to have access to state. The Dashboard can exist as a component by itself.

Employ the useState() hook which is what React has integrated for functional-components so that they have state-like behavior.

Also, it looks like you need to setup the parent Modal and a function that toggles the opened state. See working sandbox: https://codesandbox.io/s/sad-hoover-cp8f2

import React, { useState } from "react";
import { Modal, Form, Button } from "react-bootstrap";

function Dashboard() {
  const [show, setShow] = useState(false);
  return (
    <section>
      <button onClick={() => setShow(!show)}>Display modal</button>
      <Modal show={show}>
        <Modal.Dialog>
          <Modal.Header closeButton>
            <Modal.Title>Newsletter</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Form>
              <Form.Group controlId="formBasicEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control type="email" placeholder="Enter email" />
                <Form.Text className="text-muted">
                  We'll never share your email with anyone else.
                </Form.Text>
              </Form.Group>
            </Form>
          </Modal.Body>

          <Modal.Footer>
            <Button onClick={() => setShow(!show)} variant="secondary">
              Close
            </Button>
            <Button variant="primary">Save changes</Button>
          </Modal.Footer>
        </Modal.Dialog>
      </Modal>
    </section>
  );
}