Lab 12: Hiding and Showing Components

Objectives

• Add state to a component
• Hide and show a component

Steps

Add state to a component

1. Add a state variable projectBeingEdited to hold which project is currently being edited. And update handleEdit to set the projectBeingEdited variable.

   src\projects\ProjectList.tsx

   - import React from 'react';

   + import React, { useState } from 'react';

   import { Project } from './Project';

   import ProjectCard from './ProjectCard';

   import ProjectForm from './ProjectForm';

   interface ProjectListProps {

   projects: Project[];

   }

   function ProjectList({ projects }: ProjectListProps) {

   + const [projectBeingEdited, setProjectBeingEdited] = useState({});

   const handleEdit = (project: Project) => {

   - console.log(project);

   + setProjectBeingEdited(project);

   };

   return (

   ...

   );

   }

   export default ProjectList;

Hide and show a component

1. Conditionally render the ProjectForm when the projectBeingEdited equals the current project in the list, otherwise display a ProjectCard .

   src\projects\ProjectList.tsx

...

function ProjectList({ projects }: ProjectListProps) {

const [projectBeingEdited, setProjectBeingEdited] = useState({});

const handleEdit = (project: Project) => {

setProjectBeingEdited(project);

};

return (

<div className="row">

{projects.map((project) => (

<div key={project.id} className="cols-sm">

- <ProjectCard project={project} onEdit={handleEdit} />

- <ProjectForm />

+ {project === projectBeingEdited ? (

+ <ProjectForm />

+ ) : (

+ <ProjectCard project={project} onEdit={handleEdit} />

+ )}

</div>

))}

</div>

);

}

export default ProjectList;

2. Verify the application is working by following these steps:

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

   2. Click the edit button for a project.

   3. Verify the <ProjectCard /> is removed and replaced by the <ProjectForm/>.

      The <ProjectForm/> will be empty at this point. We will fill in the data in a future lab.

      You can do click another edit button on another ProjectCard and that card will change to a form. At this point, you may notice that the cancel button doesn't work. We will get that working in the next lab.

   

---

✔ You have completed Lab 12