The demo represents the high level concepts around adding or removing a table row dynamically using ReactJS, a Javascript library for building UI.

Notes

  • Following is demonstrated as part of this demo:
    1. Composite Components
    2. Event Delegation
  • The design of UI components is laid out in following manner:
    • CompanyApp Component
      • CompanyList: Encapsulates the render code for displaying list of companies
      • Company: Object representing Company. Demonstrates on how to bind onClick event for deleting and passing the event right to the parent to mutate the state.
      • NewRow: Object used to capture the input data. Represents the state.