Understanding React Props?!

MrDuck — Tue, 08 Nov 2022 19:41:13 +0000

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

DEV Community: MrDuck

Understanding React Props?!