prop
in the App.js file (this is an object containing all the parameters (object elements) that we are going to use in our component). The prop
object elements are the attributes
that are going to be used by our component.import ExpenseItem from './components/ExpenseItem';
function App() {
const expenses = [
{
id: 'e1',
title: 'Toilet Paper',
amount: 94.12,
date: new Date(2020, 7, 14),
},
{ id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
{
id: 'e3',
title: 'Car Insurance',
amount: 294.67,
date: new Date(2021, 2, 28),
},
{
id: 'e4',
title: 'New Desk (Wooden)',
amount: 450,
date: new Date(2021, 5, 12),
},
];
return (
<div>
<h2>Let's get started!</h2>
<p>This is also visible! 😅</p>
<ExpenseItem myTitle={expenses[0].title} myAmount={expenses[0].amount} myDate={expenses[0].date}></ExpenseItem>
<ExpenseItem myTitle={expenses[1].title} myAmount={expenses[1].amount} myDate={expenses[1].date}></ExpenseItem>
<ExpenseItem myTitle={expenses[2].title} myAmount={expenses[2].amount} myDate={expenses[2].date}></ExpenseItem>
<ExpenseItem myTitle={expenses[3].title} myAmount={expenses[3].amount} myDate={expenses[3].date}></ExpenseItem>
</div>
);
}
export default App;
prop
).import './ExpenseItem.css';
function ExpenseItem(myPropsObject) {
// const expenseDate = new Date(2021, 7, 18);
// const expenseTitle = 'Car Insurance';
// const expenseAmount = 294.67;
return (
<div className="expense-item">
<div>{myPropsObject.myDate.toISOString()}</div>
<div className="expense-item__description">
<h2>{myPropsObject.myTitle}</h2>
<div className="expense-item__price">{`$${myPropsObject.myAmount}`}</div>
</div>
</div>);
}
export default ExpenseItem;
The App.js
component will send data to the ExpenseItem.js
component, which in turn will send it to the ExpenseDate.js
component.
Apps.js
import ExpenseItem from './components/ExpenseItem';
function App() {
const expenses = [
{
id: 'e1',
title: 'Toilet Paper',
amount: 94.12,
date: new Date(2020, 7, 14),
},
{ id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
{
id: 'e3',
title: 'Car Insurance',
amount: 294.67,
date: new Date(2021, 2, 28),
},
{
id: 'e4',
title: 'New Desk (Wooden)',
amount: 450,
date: new Date(2021, 5, 12),
},
];
return (
<div>
<h2>Let's get started!</h2>
<p>This is also visible! 😅</p>
<ExpenseItem myTitle={expenses[0].title} myAmount={expenses[0].amount} myDate={expenses[0].date}></ExpenseItem>
<ExpenseItem myTitle={expenses[1].title} myAmount={expenses[1].amount} myDate={expenses[1].date}></ExpenseItem>
<ExpenseItem myTitle={expenses[2].title} myAmount={expenses[2].amount} myDate={expenses[2].date}></ExpenseItem>
<ExpenseItem myTitle={expenses[3].title} myAmount={expenses[3].amount} myDate={expenses[3].date}></ExpenseItem>
</div>
);
}
export default App;
ExpenseItem.js
import './ExpenseItem.css';
import ExpenseDate from './ExpenseDate';
function ExpenseItem(myPropsObject) {
return (
<div className="expense-item">
<ExpenseDate mySubDate={myPropsObject.myDate} />
<div className="expense-item__description">
<h2>{myPropsObject.myTitle}</h2>
<div className="expense-item__price">{`$${myPropsObject.myAmount}`}</div>
</div>
</div>);
}
export default ExpenseItem;
ExpenseDate.js
function ExpenseDate(mySubPropsObject) {
const month = mySubPropsObject.mySubDate.toLocaleString('en-AU', { month: 'long' });
const day = mySubPropsObject.mySubDate.toLocaleString('en-AU', { day: '2-digit' });
const year = mySubPropsObject.mySubDate.getFullYear();
return (
<div>
<div>{month}</div>
<div>{year}</div>
<div>{day}</div>
</div>
);
}
export default ExpenseDate;