Handling events and component state

react-complete-guide/src/components/Expenses/ExpenseItem.js

@@ -1,20 +1,26 @@
+import React, { useState } from 'react';
+
 import ExpenseDate from './ExpenseDate';
 import Card from '../UI/Card';
 
 import './ExpenseItem.css';
 
 function ExpenseItem(props) {
-    /*const expenseDate = new Date(2023, 4, 28);
-    const expenseTitle = 'Car Insurance';
-    const expenseAmount = 294.67;*/
+    const [title, setTitle] = useState(props.title);
+
+    const clickHandler = () => {
+        setTitle('Updated!');
+        console.log(title);
+    };
 
     return (
         <Card className="expense-item">
             <ExpenseDate date={props.date} />
             <div className="expense-item__description">
-                <h2>{props.title}</h2>
+                <h2>{title}</h2>
                 <div className="expense-item__price">${props.amount}</div>
             </div>
+            <button onClick={clickHandler}>Change Title</button>
         </Card>
     );
 }