Giter Club home page Giter Club logo

29-component-composition's Introduction

cf 29: To Do

Submission Instructions

  • Follow the instructions in the "Lab Instructions" documentation in the reference folder of the class repository

Learning Objectives

  • Students will learn about composition vs inheritance
  • Students will learn to compose react components using props

Requirements

Feature Tasks

Refactor and add the following components

NoteUpdateForm

Create a NoteUpdateForm component that inherits a note through props and onSubmit is able to update the App's state with an updated note.

Refactor the NoteItem to have the following behavior

If the user double clicks on the notes content it should switch to the Edit View

  • Default view
    • Display the notes content and a delete button
    • Display a delete button that will remove the Note from the application's state
  • Edit View
    • Show the NoteUpdateForm and a Cancel Button
      • onSubmit or click of the cancel button in NoteUpdateForm it should switch back to the default view
App Component Tree

Your components should be nested in the following layout

App
  NoteCreateForm
  NoteList
    NoteItem
      NoteUpdateForm

Test

  • Test NoteCreateForm
    • Test your onChange handler
    • Test your onSubmit handler
  • Test NoteItem
    • Test the NoteItem's ability to remove a note from the App's state
  • Test NoteUpdateForm
    • Test the NoteUpdatesForm's ability to update a note in the App's state

Documentation

Write a description of the project in your README.md

29-component-composition's People

Contributors

johncokos avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.