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.