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