Create a Component Using Properties

 

As learned earlier, React is a flexible library, but it strictly follows one important rule:

A React component must behave like a pure function with respect to its props.

A pure function does not modify its input and always returns the same output for the same input. In React, this means props are read-only and must never be changed inside a component.

However, user interfaces are dynamic and need to change over time due to user actions, network responses, and other events. To handle such changes without modifying props, React introduces the concept of state.

 

Props → Read-only, passed from parent to child

State → Mutable, managed inside the component

State allows components to update their UI dynamically while still respecting React’s rule of immutability for props.

 

Let us modify the ExpenseEntryItem component to use props.

Step 1: Open the Project

Open the expense-manager application in your editor and locate
src/components/ExpenseEntryItem.js.

Step 2: Add a Constructor with Props

 

constructor(props) {   super(props); }

Step 3: Use Props in the render() Method

 

render() {   return (      

  ); }

Meaning of Props

name → Item name (String)

amount → Expense amount (Number)

spendDate → Date of spending (Date object)

category → Expense category (String)

Complete Component Code

 

import React from 'react'; import './ExpenseEntryItem.css'; import styles from './ExpenseEntryItem.module.css'; class ExpenseEntryItem extends React.Component {   constructor(props) {      super(props);   }   render() {      return (        

     );   } } export default ExpenseEntryItem;

Passing Props from index.js

 

import React from 'react'; import { createRoot } from 'react-dom/client'; import ExpenseEntryItem from './components/ExpenseEntryItem'; const name = "Grape Juice"; const amount = 30.00; const spendDate = new Date("2020-10-10"); const category = "Food"; const container = document.getElementById('root'); const root = createRoot(container); root.render(   );

Run the application:

 

npm start

Using Props with CDN

 

     

       

 

Instead of passing multiple individual props, we can pass a single object.

Step 1: Update render() Method

 

render() {   return (      

  ); }

Step 2: Create an Object in index.js

 

const item = {   id: 1,   name: "Grape Juice",   amount: 30.5,   spendDate: new Date("2020-10-10"),   category: "Food" };

Step 3: Pass Object as Prop

 

root.render();

CDN Version (Object Props)