Progress on #167

examples/computed-form-fields/README.md

@@ -1,16 +1,19 @@
 # Computed Form Fields Example
 
-[Official Documentation](https://nmfs-radfish.github.io/radfish/)
+This example shows you how to build a form with computed form fields. Computed form fields automatically calculate a value based on a separate read-only field. For example, if a user inputs a quantity, a computed form field can multiply that number by a price to give a total cost. 
 
-This example demonstrates how to build a form where specific input fields automatically calculate the value of a separate read-only field within the form.
+Learn more about RADFish examples at the official [documentation](https://nmfs-radfish.github.io/radfish/developer-documentation/examples-and-templates#examples). Refer to the [RADFish GitHub repo](https://nmfs-radfish.github.io/radfish/) for more information and code samples.
 
-Learn more about RADFish examples at the official [documentation](https://nmfs-radfish.github.io/radfish/developer-documentation/examples-and-templates#examples).
+## Preview
+This example will render as shown in this screenshot:
+
+![Computed Form Fields](./src/assets/computed-form-fields.png)
 
 ## Steps
 
 ### 1. Define Constants for Input Fields
 
-Before building out your form, define constants for each input field. Using constants helps reduce the possibility of typos and makes your logic more maintainable.
+Before building out your form, define constants for each input field. Using constants helps reduce errors and makes your logic more maintainable.
 
 ```jsx
 const SPECIES = "species";
@@ -24,7 +27,7 @@ In this example, we will build a form with three inputs. The values from the fir
 
 Next, we'll define the main form component. To manage the data entered in the form, we initialize it with a `formData` state variable, which is an empty object. This state will dynamically store the values of the form fields as users interact with the form.
 
-The `setFormData` function allows us to update the state whenever an input changes, ensuring the form data is kept in sync.
+The `setFormData` function allows us to update the state whenever an input changes. This ensures the form data is kept in sync.
 
 ```jsx
 const ComputedForm = () => {
@@ -38,7 +41,7 @@ const ComputedForm = () => {
 
 ### 3. Structuring the Form with Inputs
 
-In the `return` statement of the component, use Trussworks's `Form` component to structure your form. Within the form, include input components such as `TextInput`, referencing the variables defined in step 1 (e.g., `NUMBER_OF_FISH`) instead of hardcoding strings. This practice helps avoid typos and ensures consistency when accessing the `formData` state. For better organization and styling, wrap your inputs within the `FormGroup` component provided by Trussworks.
+In the `return` statement of the component, use the Trussworks `Form` component to structure your form. Within the form, include input components such as `TextInput`, referencing the variables defined in Step 1 (e.g. `NUMBER_OF_FISH`) instead of hardcoding strings. This practice helps avoid typos and ensures consistency when accessing the `formData` state. For better organization and styling, wrap your inputs within the `FormGroup` component provided by Trussworks.
 
 ```jsx
 return (
@@ -62,11 +65,11 @@ return (
 
 ### 4. Adding Input Handlers for Form Fields
 
-In this step, we will use `handleNumberFishChange` and `handleSelectChange` to manage the state for the **Number of Fish** and **Species** fields. These functions update the `formData` state whenever the user interacts with the inputs.
+Use `handleNumberFishChange` and `handleSelectChange` to manage the state for the **Number of Fish** and **Species** fields. These functions update the `formData` state whenever the user interacts with the inputs.
 
-For the **Number of Fish** input, the `handleNumberFishChange` function captures the input value and updates the corresponding field in the `formData` state. Similarly, the `handleSelectChange` function updates the state when a species is selected.
+For the **Number of Fish** input, the `handleNumberFishChange` function captures the input value and updates the corresponding field in the `formData` state. Similarly, the `handleSelectChange` function updates the state when the user selects a species.
 
-Function to handle changes in the **Number of Fish** input field:
+This function handles changes in the **Number of Fish** input field:
 ```jsx
 const handleNumberFishChange = (event, formData) => {
     const { value } = event.target;
@@ -92,9 +95,9 @@ Use the `handleNumberFishChange` function to manage the **Number of Fish** input
 
 ### 5. Calculating Computed Price
 
-In addition to updating the input value of `numberOfFish`, we also want to update the value of `computedPrice`. We can do that by adding a helper function to run some logic to compute that value (usually based on other form field values), and then calling that helper function in the input's `onChange` handler:
+In addition to updating the input value of `numberOfFish`, we also want to update the value of `computedPrice`. We can do that by adding a helper function to run some logic to compute that value. We then call that helper function in the input's `onChange` handler:
 
-Mapping of species to their respective prices:
+This maps species to their respective prices:
 ```jsx
 const speciesPriceMap = {
     grouper: 25.0,
@@ -112,7 +115,7 @@ const computeFieldValue = (numberOfFish, species) => {
 };
 ```
 
-Updates the **Number of Fish** and dynamically computes the "Computed Price":
+This function updates the **Number of Fish** and dynamically computes the "Computed Price":
 ```jsx 
 const handleNumberFishChange = (event, formData) => {
     const { value } = event.target;
@@ -123,7 +126,3 @@ const handleNumberFishChange = (event, formData) => {
     });
 };
 ```
-## Preview
-This example will render as shown in this screenshot:
-
-![Computed Form Fields](./src/assets/computed-form-fields.png)

examples/conditional-form-fields/README.md

@@ -1,16 +1,20 @@
 # Conditional Form Fields Example
 
-[Official Documentation](https://nmfs-radfish.github.io/radfish/)
+This example shows you how to create a dynamic form with conditional fields. The visibility of certain input fields depends on the values of other fields.  Specifically, when the `fullName` field is filled out, the `nickname` field becomes visible. If the `fullName` field is empty, the `nickname` field is hidden and removed from the `formState`.
 
-This example demonstrates how to create a dynamic form where the visibility of certain input fields is controlled by the values of other fields. Specifically, when the `fullName` field is filled out, the `nickname` field becomes visible. If the `fullName` field is cleared, the `nickname` field is hidden and removed from the `formState`.
+Learn more about RADFish examples at the official [documentation](https://nmfs-radfish.github.io/radfish/developer-documentation/examples-and-templates#examples). Refer to the [RADFish GitHub repo](https://nmfs-radfish.github.io/radfish/) for more information and code samples.
+
+## Preview
+This example will render as shown in this screenshot:
+
+![Conditional Form Fields](./src/assets/conditional-form-fields.png)
 
-Learn more about RADFish examples at the official [documentation](https://nmfs-radfish.github.io/radfish/developer-documentation/examples-and-templates#examples).
 
 ## Steps
 
 ### 1. Define Constants for Input Fields
 
-Before building out your form, define constants for each input field. Using constants helps reduce the possibility of typos and makes your logic more maintainable.
+Before building out your form, define constants for each input field. Using constants helps reduce errors and makes your logic more maintainable.
 
 ```jsx
 const FULL_NAME = "fullName";
@@ -23,7 +27,7 @@ In this example, we will build a form with two inputs. The value from `FULL_NAME
 
 Next, we'll define the main form component. To manage the data entered in the form, we initialize it with a `formData` state variable, which is an empty object. This state will dynamically store the values of the form fields as users interact with the form.
 
-The `setFormData` function allows us to update the state whenever an input changes, ensuring the form data is kept in sync.
+The `setFormData` function allows us to update the state whenever an input changes. This ensures the form data is kept in sync.
 
 ```jsx
 const ConditionalForm = () => {
@@ -37,7 +41,7 @@ const ConditionalForm = () => {
 
 ### 3. Structuring the Form with Inputs
 
-In the `return` statement of the component, use Trussworks's `Form` component to structure your form. Within the form, include input components such as `TextInput`, referencing the variables defined in step 1 (e.g., `FULL_NAME`) instead of hardcoding strings. This practice helps avoid typos and ensures consistency when accessing the `formData` state. For better organization and styling, wrap your inputs within the `FormGroup` component provided by Trussworks.
+In the `return` statement of the component, use the Trussworks `Form` component to structure your form. Within the form, include input components such as `TextInput`, referencing the variables defined in Step 1 (e.g., `FULL_NAME`) instead of hardcoding strings. This practice helps avoid typos and ensures consistency when accessing the `formData` state. For better organization and styling, wrap your inputs within the `FormGroup` component provided by Trussworks.
 
 ```jsx
 return (
@@ -60,9 +64,9 @@ return (
 
 ### 4. Adding Input Handlers for Form Fields
 
-Now, for each input, we can create an `onChange` handler, that captures the input's value as it is being typed. We will use `handleFullNameChange` to update state with a copy of the existing `formState`, and update only the field value that we want to update (in this case `fullName`). The value of this input will then re-render with the updated value from `formState`.
+Now we can create an `onChange` handler for each input. This captures the input's value as it is being typed. We'll use `handleFullNameChange` to update state with a copy of the existing `formState`, and update only the field value that we want to update. In this case, the value we want to update is `fullName`. The value of this input will then re-render with the updated value from `formState`.
 
-Function to handle changes in the **Full Name** input field
+This function handles changes in the **Full Name** input field:
 ```jsx
 const handleFullNameChange = (event, formData) => {
     const { value } = event.target;
@@ -73,7 +77,7 @@ const handleFullNameChange = (event, formData) => {
 };
 ```
 
-Use the `handleFullNameChange` function to manage the **Full Name** input
+Use the `handleFullNameChange` function to manage the **Full Name** input:
 ```jsx
 <TextInput
     id={FULL_NAME}
@@ -87,7 +91,7 @@ Use the `handleFullNameChange` function to manage the **Full Name** input
 
 ### 5. Conditionally Render Nickname Field 
 
-Additionally, we want to conditionally render the `nickname` component, depending on whether or not the `fullName` value is set in `formState`. This input field will only render if `formData[FULL_NAME]` evaluates to `true`.
+Next, we want to conditionally render the `nickname` component. The condition depends on whether or not the `fullName` value is set in `formState`. This input field will only render if `formData[FULL_NAME]` evaluates to `true`.
 
 ```jsx
 {
@@ -109,7 +113,7 @@ Additionally, we want to conditionally render the `nickname` component, dependin
 
 ### 6. Managing Dependent Field Values  
 
-In this step, we ensure that the value of the **Nickname** field is cleared whenever the **Full Name** field is empty. This can be achieved by adding logic to the `onChange` handler which calls `handleFullNameChange` function.
+In this step, we ensure that the value of the **Nickname** field is cleared whenever the **Full Name** field is empty. Do this by adding logic to the `onChange` handler which calls the `handleFullNameChange` function.
 
 ```jsx
 const handleFullNameChange = (event, formData) => {
@@ -121,7 +125,3 @@ const handleFullNameChange = (event, formData) => {
     });
 };
 ```
-## Preview
-This example will render as shown in this screenshot:
-
-![Conditional Form Fields](./src/assets/conditional-form-fields.png)