Selecting data to view
Let’s add in some dynamic behavior to our page. We’ll make each of the list items a link that the user can click on to view that appointment.
Thinking through our design a little, there are a few pieces we’ll need:
- A
buttonelement within ourli - An
onClickhandler that is attached to thatbuttonelement - Component state to record which appointment is currently being viewed
When we test React actions, we do it by observing the consequences of those actions. In this case, we can click on a button and then check that its corresponding appointment is now rendered on the screen.
We’ll break this section into two parts: first, we’ll specify how the component should initially appear, and second, we’ll handle a click event for changing the content.
Initial selection of data
Let’s start by asserting that each li element has a button element:
- We want to display a message to the user...