🔽

Using props

First, we define the 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;

Then we use the props in our component, as an only paramenter (an object containing all the parameters, also known as 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;

Using props through multiple component children

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;