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)