Reactstrap: Getting Modal to work

Question

Trying to learn React and Reactstrap and trying to get Modals to work. When I click the button, it should toggle the Modal, but right now it's giving me this error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'App'

Can't figure out what I'm doing wrong. Can someone help let me know where I'm going wrong here? Appreciate any help you can give.

I'd like to use the most recent versions of React and Reactstrap if possible.

Here's a link on Codepen: https://codepen.io/lieberscott/pen/ddYNVP

const { Button,
       Container,
       Modal,
       ModalTitle,
       ModalHeader,
       ModalBody,
       ModalFooter } = Reactstrap;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    }
    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal() {
    console.log("hello");
    this.setState({
      showModal: !this.state.showModal
    })
  }

  render() {
    return (
      <Container>
        <Headline />
        <Box />
        <Button outline color="primary" onClick={this.toggleModal}>Click</Button>
        <Modal isOpen={this.state.showModal} toggle={this.toggleModal} className="modal">
          <ModalHeader>
            <ModalTitle id="modalTitle">
              Add a Recipe
            </ModalTitle>
          </ModalHeader>
          <ModalBody>
            Modal body
          </ModalBody>
          <ModalFooter>
            Modal footer
          </ModalFooter>
        </Modal>
      </Container>
    );
  }
}

class Headline extends React.Component {
  render() {
    return (
      <div>
        Recipes
      </div>
    );
  }
}

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        {
        name: "Tofu tacos",
        ingredients: [
          "Shells",
          "lettuce",
          "tofu",
          "paprika"
        ]
      },
      {
        name: "Spaghetti",
        ingredients: [
          "pasta",
          "sauce",
          "salt"
        ]
      }
      ] // end of items
    } // end of this.state
  } // end of constructor
  render() {
    const allitems = this.state.items.map(item => {
      return (
        <div>
          {item.name}
        </div>
      );
    })
    return (
      <div>
        {allitems}
      </div>
    );
  }
}

const app = document.getElementById("app");

ReactDOM.render(<App />, app);

Answer 1

I don't know how to share my code via codepen like you did, sorry.

I did these changes:

toggleModal() {
    console.log("hello");
    console.log( 'before setState: ', this.state );
    this.setState({
      showModal: !this.state.showModal
    })
    console.log( 'after setState: ', this.state );
  }

The Button onClick event, when you do onClik={this.something} this this refers to the Button element. I changed to:

<Button outline color="primary" onClick={() => this.toggleModal()}>Click</Button>

When I do onClick={ () => this.something() } allows me to make use of the methods of my class.

Just look at the console.log output and you'll see clicking on button change showModal to true or false .

Take a look on cephalization's answer: https://forum.freecodecamp.org/t/difference-in-reactjs-onclick-function-binding/116027/2

Answer 2

It is far easier this way

add your state in the constructor example

 this.state={showLogOut: false}

in your return all you need is to setState true example

<Button onClick={() => this.setState({showLogOut: true})}>Show modal</Button>

now all we need is the modal code since we have an state and a setState

<Modal isOpen={this.state.showLogOut} fade="false"  toggle={() => this.setState({showLogOut: false})}>
<ModalHeader toggle={() => this.setState({showLogOut: false})}>Ready to leave?</ModalHeader>
    <ModalBody>   
        <p>Press logout to end session.</p>                     
    </ModalBody>
<ModalFooter>

    <Button onClick={() => this.setState({showLogOut: false})}>Cancel</Button>
    <Button color="info">Logout</Button>
</ModalFooter>

this should be enough to show your modal: I am assuming you are using react-strap and that you are importing the required elements but just to make sure here is what you need to import

import { Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';

Answer 3

Reactstrap Modal don't show, because is need fade set on False. plz look my code who worked.

class Demoextends extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        modal: false,
        fade: false
    };
    this.toggle = this.toggle.bind(this);
};
toggle() {
    console.log("hello");
    this.setState({
        modal: !this.state.modal
    });
    console.log( 'after setState: ', this.state );
}
render() {
    return (
        <div>
            <Button color="danger" onClick={this.toggle}>Launch</Button>
            <Modal isOpen={this.state.modal} fade={this.state.fade }  toggle={this.toggle}>
                <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
                <ModalBody>                        
                </ModalBody>
                <ModalFooter>
                    <Button onClick={this.toggle}>Do Something</Button>{' '}
                    <Button onClick={this.toggle}>Cancel</Button>
                </ModalFooter>
            </Modal>
        </div>
    );
}

}

export default Demoextends;

Of course You must add and part of reactstrap in your code