So a few days ago I ask on here to explain "React props to me", in which case you guys did. Now I decided to recreate the concept in VS code. However I am not getting any errors, and the actual code is not showing up in my browser. Can you please tell me what I am doing wrong?
App.js:
import './App.css';
import Purchase from './components/Purchase';
function App() {
const pets = [{
"firstName": "Maximilien",
"lastName": "Brognot",
"date": new Date(2019, 9, 10),
"gender": "Male",
"amount": "$273.51"
}, {
"firstName": "Gavin",
"lastName": "Gaughan",
"date": new Date(2020, 7, 14),
"gender": "Male",
"amount": "$297.55"
}, {
"firstName": "Wendell",
"lastName": "Gilhoolie",
"date": new Date(2021, 2, 1),
"gender": "Male",
"amount": "$188.40"
}, {
"firstName": "Kearney",
"lastName": "McLevie",
"date": new Date(2020, 7, 14),
"gender": "Genderfluid",
"amount": "$1393.92"
}, {
"firstName": "Noby",
"lastName": "Yirrell",
"date": new Date(2002, 6, 25),
"gender": "Male",
"amount": "$36.57"
}, {
"firstName": "Grant",
"lastName": "Breeds",
"date": new Date(2003, 12, 1),
"gender": "Male",
"amount": "$1869.73"
}, {
"firstName": "Vivianne",
"lastName": "Hackinge",
"date": new Date(1996, 8, 4),
"gender": "Female",
"amount": "$385.87"
}]
return (
<div className="App">
<p>Hey Whats Up</p>
<Purchase items={pets} />
</div>
);
}
export default App;
Purchase.js:
import PurchaseItem from "./PurchaseItem"
import './Purchase.css'
function Purchase(props){
return(
<div>
<PurchaseItem
firstName={props.items[0].firstName}
amount={props.items[0].amount}
date={props.items[0].date}
/>
<PurchaseItem
firstName={props.items[1].firstName}
amount={props.items[1].amount}
date={props.items[1].date}
/>
</div>
)
}
export default Purchase
PurchaseDate.js :
function PurchaseDate(props){
const month = props.date.LocaleString("en-US", { month: "long" });
const day = props.date.toLocaleString("en-US", { day: "2-digit" });
const year = props.date.getFullYear();
return <div>
<div className="expense-date__month">{month}</div>
<div className="expense-date__year">{year}</div>
<div className="expense-date__day">{day}</div>
</div>
}
export default PurchaseDate
PurchaseItem.js
import PurchaseDate from "./PurchaseDate"
function PurchaseItem(props){
return(
<div>
<PurchaseDate date={props.date} />
<h3>{props.firstName}</h3>
<h3>{props.lastName}</h3>
<h5>{props.amount}</h5>
</div>
)
}
export default PurchaseItem
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
So I am trying to Pass the Data through App.js > PurchaseDate > PurchaseItem > Purchase. Why is it now working?
Thank You
Top comments (0)