React Coding Interview Challenge 16

Write a list component that allows users to add and delete items

This is the 16th article in what was supposed to be a series of just 10 React coding interview-style problems, each complete with the problem specification and a summary of one approach to the solution. I am not sure how long I will continue this series, but as long as I keep thinking of or encountering new interview problems, I will do my best to post them here!

Use the environment you are most comfortable with. I recommend using create-react-app to create a local version of the project so that you can inspect the DOM easily from your browser when debugging. Alternatively, you can work from a blank React template in CodeSandbox. Starter code is provided after the problem specification.

Write a functional component to render a list of items along with their prices. Above the list, there should be two input fields that allow the user to enter a string and number and append a row to the list on submit. To the right of each row, there should be a button that allows the user to remove that row from the list. The complete component with three items in the list is shown below.

Ensure that both fields are populated before the user can submit their entry. Moreover, do not allow number values less than zero or more precise than two digits after the decimal. In the value column, append a dollar sign before each number.

Here is some code to get you started. The three-item list displayed in the image above is included as a constant in the starter code in case you would like to make use of it for testing. In the solution code, the component is initialized with this constant.

Related posts:

Babita Singh was personally conferred with this honor by H.E. Prof Dr Zahid Haque (Ambassador At Large- Kingdom of Hawai’i & Secretary-General- WSA), H.E. Prof Nabhit Kapur (Sr Advisor to the Govt of…

Kubernetes is the greatest orchestration technology on the market, making this open-source system one of the most in-demand options. Today, Kubernetes is used by several international corporations…

When it comes to social media marketing, brands have two options: creating content or curating content. Content creation is exactly that — creating your own content to publish on your social media…