React App Kata 3 Typescript

May 15, 2018 · View on GitHub

Code for Kata 3 Typescript is available in the app3-ts folder.

Learning aims

The idea here is to keep learning the concept of state, props, callbacks and React lifecycles in React.

Write the TypeScript/React code to:

Note: Remember you can run yarn lint as you develop to see all linting errors as you work

In App.tsx Add a <form> for the product name filter in filter-products div. It should contain:
- label for product name
- input for filtering by name
Add productNameToFilter to AppState near the top of App.tsx
- Remember to update the initial state object to initialise productNameToFilter
Add a handler function for the onChange event of the input of the form.
- Set productNameToFilter in App's state to the value from the input field
- It might be helpful to look at the existing input fields as an example
The input filed for setting the product name to filter must be synced with the component's state
- Set the product filter's input field value to productNameToFilter in App's state
- e.g: <input ... value={this.state.productNameFilter}/>
Filter products in the render method based on filter input.
- You could do filter with Typescript array object

The idea is to have products be collapsible.

Change ProductComponent so that descriptions are not shown.
- Do this by adding a boolean flag to ProductComponentState (for example: showDescription)
- A very common pattern in React is conditional rendering, here are some examples:
  - {condition? <div>foo</div>: null}
  - {condition? <div>foo</div>: <div>bar</div>}
  - {condition && <div>hello</div>}
Add a + or - component next to the product name and toggle it on click
- It should show or hide the product description.
Listen to onClick on the component you just created and update your flag accordingly.