Skip to content

LaurenceRLewis/LEARNING-REACT_Editable-Description-List

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LEARNING-REACT_Editable-Description-List

Steps used to build the component

This is my attempt at learning REACT. There are many bugs in these components and they MUST not be copied for use in production.

Working example on Netify:

  1. Created a new React component named DescriptionList.
  2. Imported React and the useState hook.
  3. Defined the initial state for the component, including a default name, an editMode state and a status state.
  4. Returned JSX that renders a description list with a
  5. Description Term (DT) of "Name" and a Description
  6. Definition (DD) that displays the name state.
  7. If the editMode state is true, it renders a form with an input for the name and a save button. If the editMode state is false, it renders the DD with the name state and an "Edit name" button.
  8. Created a CSS file and added styles for the description
  9. Imported the CSS file into the component file.