Lab 9: Responding to an Event

Objectives

• Add a button
• Handle the click event

Steps

Add a button

1. Open the file src\projects\ProjectCard.tsx

2. Add an edit button to the ProjectCard using the HTML snippet below.

   <!-- place this below the <p>Budget: ...</p> -->

   <button class="bordered">

   <span class="icon-edit "></span>

   Edit

   </button>

   Remember you will need to change some things about the HTML to make it valid JSX

   src\projects\ProjectCard.tsx

   ...

   <p>Budget...</p>

   <button className=" bordered">

   <span className="icon-edit "></span>

   Edit

   </button>

3. Verify the button displays in your browser.

   

Handle the click event

1. Add a handleEditClick event handler to ProjectCard that takes a project as an argument and logs it to the console.

   src\projects\ProjectCard.tsx

   function ProjectCard(props: ProjectCardProps) {

   const { project } = props;

   + const handleEditClick = (projectBeingEdited: Project) => {

   + console.log(projectBeingEdited);

   + };

   return (

   <div className="card">

   <img src={project.imageUrl} alt={project.name} />

   <section className="section dark">

   <h5 className="strong">

   <strong>{project.name}</strong>

   </h5>

   <p>{project.description}</p>

   <p>Budget : {project.budget.toLocaleString()}</p>

   <button className=" bordered">

   <span className="icon-edit "></span>

   Edit

   </button>

   </section>

   </div>

   );

   }

2. Wire up the click event of the edit button to the handleEditClick event handler.

   src\projects\ProjectCard.tsx

   function ProjectCard(props: ProjectCardProps) {

   const { project } = props;

   const handleEditClick = (projectBeingEdited: Project) => {

   console.log(projectBeingEdited);

   };

   return (

   <div className="card">

   <img src={project.imageUrl} alt={project.name} />

   <section className="section dark">

   <h5 className="strong">

   <strong>{project.name}</strong>

   </h5>

   <p>{project.description}</p>

   <p>Budget : {project.budget.toLocaleString()}</p>

   <button

   className=" bordered"

   + onClick={() => {

   + handleEditClick(project);

   + }}

   >

   <span className="icon-edit "></span>

   Edit

   </button>

   </section>

   </div>

   );

   }

3) Verify the application is working by following these steps:

1. Open the application in your browser and refresh the page.

2. Open the Chrome DevTools to the console (F12 or fn+F12 on laptop).

3. Click the edit button.

4. Verify the project is logged to the Chrome DevTools console.

   

---

✔ You have completed Lab 9