I am trying to map data from my data file through props into my React-Bootstrap Accordion component. The method I am using will change as I progress as I know the formatting wont be exactly how I want it moving forward.
However I cant actually visualise or work out how to get structure right as I can't even see the data or the Accordion component displaying but I get no errors in the console.
Essentially I want to be able to use the map function to create all the react-bootstrap accordion components with the data from the props.
Code is below please let me know if any more is needed.
Menu.js
import React from "react";
import { Accordion, Button, Card, Jumbotron, Table } from "react-bootstrap";
function Menu(props) {
return (
<div>
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
{props.header}
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
{props.body}{" "}
<Button variant="light" className="menu-basket-btn">
<i class="fas fa-shopping-basket"></i>
</Button>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
}
export default Menu;
Home.js
import React from "react";
import { Jumbotron } from "react-bootstrap";
import Menu from "../Components/MenuFolder/Menu";
import data from "../Components/MenuFolder/MenuData";
const menuCreator = (item) => {
<Menu
key={item.id}
header={item.header}
body={item.body} />;
};
function Home() {
return (
<div className="home-page">
<div className="home-jumbotron">
<Jumbotron>
<h1>Fresh Asian Cuisine straight to your door!</h1>
<p>Order direct from our website for the best deals and prices!</p>
</Jumbotron>
</div>
<div className="menu-section">
<section className="starters">
<div>
<h1 className="title">Starters</h1>
{data.map(menuCreator)}
</div>
</section>
<section className="mains">
<h1 className="title">Mains</h1>
<div></div>
</section>
<section className="desserts">
<h1 className="title">Desserts</h1>
</section>
<section className="sundries">
<h1 className="title">Rice</h1>
</section>
</div>
</div>
);
}
export default Home;
MenuData.js
const data = [
{
id: 1,
header: "Meat Dumplings",
body: "6pc's - £4.99",
},
{
id: 2,
header: "Veggie Dumplings",
body: "6pc's - £3.99",
},
{
id: 3,
header: "Duck Spring Rolls",
body: "4pc's - £4.29"
},
{
id: 4,
header: "Veggie Spring Rolls",
body: "4pc's - £3.79",
},
{
id: 5,
header: "Green Thai Curry",
body: "£9.99"
},
{
id: 5,
header: "Red Thai Curry",
body: "£9.99",
},
{
id: 6,
header: "Pad Thai",
body: "£12.99"
},
{
id: 7,
header: "Japanese Curry",
body: "£10.99"
},
{
id: 8,
header: "Spicy Sichuan Tofu Noodles",
body: "£8.99"
},
{
id: 9,
header: "Tonkotsu Ramen",
body: "£12.99"
},
{
id: 10,
header: "Spicy Miso Noodles",
body: "£7.99"
},
{
id: 11,
header: "Oyaka Don",
body: "£8.99"
},
{
id: 12,
header: "Matcha Brownies",
body: "£4.99"
},
{
id: 13,
header: "Salted Caramel Brownies",
body: "£3.99"
},
{
id: 14,
header: "Jasmine Rice",
body: "£2.99"
},
{
id: 15,
header: "Sticky Japanese Rice",
body: "£3.99"
},
{
id: 16,
header: "Basmati Rice",
body: "£1.99"
},
{
id: 17,
header: "Egg Fried Rice"
},
]
export default data;
There are few issues in your code.
1. Import bootstrap css or use bootstrap cdn(more you can read here)
import "bootstrap/dist/css/bootstrap.min.css";
2. You are not returning
Menu component. It would be like this:
const menuCreator = (item) => {
return <Menu key={item.id} header={item.header} body={item.body} />;
};
Here is complete working demo: https://codesandbox.io/s/inspiring-cloud-10u5z?file=/src/App.js:2042-2147