React Bootstrap modal

I am trying to get a modal to show which will serve as the edit recipe, and another one for my add recipe. I read the your component should only do one thing, and my RecipeBox is showing the recipes when clicked on. So it made sense to me to make the modal another component, but I cant get it to show. There is a button under neath the recipe thats says show, and calls handleShow which is passed as a prop to the modal like. Which at first seemed like a good idea, but now im doubting it. The example given is the modal in one component, I would think you should be able to have a button to call it

 <Modal show={this.props.show} close={this.props.handleClose}>

my codepen (the main styling will come later when the app is functional. Still need to split my ingredient, and directions since it does not seem to like .split(",").join("\n") researching that now)

OK, you need to learn to read your console. You were getting an error there:

react-bootstrap.min.js:12 Uncaught TypeError: o is not a function
at Object. (VM78 react-bootstrap.min.js:12)
at n (VM78 react-bootstrap.min.js:1)
at Object. (VM78 react-bootstrap.min.js:12)
at n (VM78 react-bootstrap.min.js:1)
at Object. (VM78 react-bootstrap.min.js:12)
at n (VM78 react-bootstrap.min.js:1)
at Module. (VM78 react-bootstrap.min.js:12)
at n (VM78 react-bootstrap.min.js:1)
at Object. (VM78 react-bootstrap.min.js:12)
at n (VM78 react-bootstrap.min.js:1)

What does the error mean? I don’t know. I couldn’t find it anywhere. So I rolled your versions back to what I used on my project:

https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.10/react-bootstrap.min.js

And you need to add the bootstrap CSS in your CSS pane:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

I don’t know why this magic combination works and your doesn’t, but it does.

Next you have to import the modal. CodePen knows there is this thing called Bootstrap but doesn’t know what a Modal is. In the real world you would do something like:

import { Modal } from ReactBootstrap;

but CP is a little different so you’ll do:

const Modal = ReactBootstrap.Modal;

or

const { Modal } = ReactBootstrap;

Lastly you have a spelling mistake. You component is called EditRecipe but you try to use it as:

        <editRecipe
          show={this.handleShow}
          close={this.handleClose}
          realShow={this.state.show}
          />

When I fix those things, your modal works.

Now to your other questions…

I read the your component should only do one thing,

Always good advice. It can do the same thing for different parts of the code or do slightly different things depending. For example, I used the same modal for adding and editing since they are basically the same thing.

Which at first seemed like a good idea, but now im doubting it.

Sure, that is one way to handle it.

Still need to split my ingredient, and directions since it does not seem to like .split(“,”).join(“\n”) researching that now)

Remember that this is JS but because it is in JSX, it is outputting to HTML. I think an HTML element like <br /> would do it. Or, instead of joining them, feed that array through a map method and created separate p or li nodes for each of those. This would probably be the more React-y way to do it.

1 Like

Got it working! I saw the error, and have been spending over an hour trying to figure out what was going on. Never did find anything on stack overflow, or anywhere else. Im going to be honest I did not even think of adding the css…probably because I have never done anything where I needed to.

Works great now though! I fixed it, so the close button works now. Was not passing in the props I got from the recipe box. Appreciate the help!