"Your render method should have a return statement" when I do have a return statement

Question

So basically what I am trying to do here is set the toggle state for my modal and then toggle the module on and off via the alert and that should work fine hopefully. However for some reason I am getting the error "Your render method should have a return statement" when I do have a return statement. Does anyone know what could be causing this?

import React, { Component, useState } from "react";

import { Button, Alert, Input, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

import ViewEmail from "./viewEmail";

class SingleEmail extends Component {
  render() {
    const ModalExample = (props) => {
      const { buttonLabel, className } = props;

      const [modal, setModal] = useState(false);

      const toggle = () => setModal(!modal);
      return (
        <>
          <div>
            <Modal isOpen={modal} toggle={toggle} className={className}>
              <ModalHeader toggle={toggle}>Modal title</ModalHeader>
              <ModalBody>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </ModalBody>
              <ModalFooter>
                <Button color="primary" onClick={toggle}>
                  Do Something
                </Button>{" "}
                <Button color="secondary" onClick={toggle}>
                  Cancel
                </Button>
              </ModalFooter>
            </Modal>
            <Alert
              onClick={toggle}
              className="SingleEmail"
              style={{
                backgroundColor: "white",
                border: "1px solid lightgray",
                color: "black",
              }}
            >
              <div className="CheckBox">
                <Input addon type="checkbox" />
              </div>
              <div className="MarkImportant">
                <i class="fas fa-star"></i>
              </div>

              <p className="EmailFrom">{this.props.From}</p>
              <p className="EmailTitle">{this.props.Subject}</p>
              <p className="EmailDate">{this.props.Date}</p>
            </Alert>
          </div>
        </>
      );
    };
  }
}

export default SingleEmail;

Answer 1

You do not have a return statement inside the SingleEmail component but inside the ModalExample component which you have defined inside the render method of SingleEmail.

If you wish to use the ModelExample layout as singleEmail component, you can simply export the same component like

const SingleEmail = (props) => {
  const { buttonLabel, className } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);
  return (
    <>
      <div>
        <Modal isOpen={modal} toggle={toggle} className={className}>
          <ModalHeader toggle={toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident,
            sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={toggle}>
              Do Something
            </Button>{" "}
            <Button color="secondary" onClick={toggle}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
        <Alert
          onClick={toggle}
          className="SingleEmail"
          style={{
            backgroundColor: "white",
            border: "1px solid lightgray",
            color: "black",
          }}
        >
          <div className="CheckBox">
            <Input addon type="checkbox" />
          </div>
          <div className="MarkImportant">
            <i class="fas fa-star"></i>
          </div>

          <p className="EmailFrom">{props.From}</p>
          <p className="EmailTitle">{props.Subject}</p>
          <p className="EmailDate">{props.Date}</p>
        </Alert>
      </div>
    </>
  );
};
export default SingleEmail;

Answer 2

you have no return in render function, you can return ModalExample and things will be fine; like this:

class SingleEmail extends Component {
  render() {
    const ModalExample = (props) => {
      const { buttonLabel, className } = props;
      const [modal, setModal] = useState(false);
      const toggle = () => setModal(!modal);
      return (
        <>
          <div>              
            ....
            ....
            ....
          </div>
        </>
      );
    };
    return ModalExample;
  }
}