Mastering React Test-Driven Development

Finishing it off

The Git tag for this section is submitting-radio-buttons.

The next few tests are tests you've seen before:

• Pre-selects the existing value
• Saves existing value when submitted
• Saves new value when submitted

For the first of these, to ensure a radio button is checked, add checked={true} to the JSX input element. Your code will look like this:

const isChecked = startsAt === checkedTimeSlot;return (  <input    name="startsAt"    type="radio"    checked={isChecked}    readOnly  />);

In the previous example, checkedTimeSlot is the startsAt value that is currently selected, and would be a prop passed into RadioButtonIfAvailable.

The prop passed into AppointmentForm should be called timeSlot. To improve clarity within the RadioButtonIfAvailable ...