Hey all,
I’m currently working on my recipe box project and I’ve hit a wall. I’m not really sure how to keep on going and I’ve tried a few different ways to add a pop up to confirm delete a recipe, but none of them seem to work. Here is my code, maybe I’m doing something wrong, but I’m not sure what my next steps are.
import React from 'react'
import ReactDOM from 'react-dom'
import ReactBootstrap from 'react-bootstrap'
import { ListGroup } from 'react-bootstrap'
import { ListGroupItem } from 'react-bootstrap'
import { Panel } from 'react-bootstrap'
import { ButtonGroup } from 'react-bootstrap'
import { Button } from 'react-bootstrap'
import { Modal } from 'react-bootstrap'
//This requires a recipe props of food, ingredietns, and an optional image, and prints specifically the recipe data
const StatelessFunctionalRecipe = (props) => {
let ingredients = props.ingredients.map((item) => {
return (<ListGroupItem key={item}>{item}</ListGroupItem>)
});
let style = {
"width": "100%",
"height": "100%",
"borderColor": "rgb(42, 42, 42)",
"borderWidth": "5px",
"borderRadius": "10px",
"marginBottom": "2%"
}
return (
<div>
<h1 className ="text-center">{props.food}</h1>
{props.image &&
<img src={props.image} style={style}></img>
}
<ListGroup>
{ingredients}
</ListGroup>
</div>
);
};
//The component deals with the drop down part of every recipe along with the buttons
class CollapseableRecipe extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
render() {
const title = (
<div>
<a className="panelHead"onClick={()=>this.setState({open: !this.state.open})}>{this.props.food}</a>
<ButtonGroup className="add-delete">
<Button bsStyle="success">Add to shopping list</Button>
<Button bsStyle="danger">Delete Recipe</Button>
</ButtonGroup>
</div>
)
return (
<div>
<Panel collapsible expanded={this.state.open} header={title}>
<StatelessFunctionalRecipe food={this.props.food} ingredients={this.props.ingredients} image={this.props.image} />
</Panel>
</div>
)
}
}
class FullBox extends React.Component {
constructor(props) {
super(props);
}
render() {
let ingredients = ["Flower", "Baking soda", "Pistachios", "Honey", "Puff Pastry", "Love", "Wawa"];
let image = "http://assets.simplyrecipes.com/wp-content/forum/uploads/2008/02/baklava-horiz-a-640.jpg";
let food = "Baklava";
return (
<div>
<CollapseableRecipe ingredients = {ingredients} image = {image} food = {food} />
</div>
);
}
};
ReactDOM.render(<FullBox />, document.getElementById('render-target'));