System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-20 00:25:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix bug with unsynced state on page load

Browse source
This commit is contained in:
Gary Tou 2024-10-25 21:21:32 -07:00
parent 9062fcf7b3
commit 6ebc24c982
No known key found for this signature in database
GPG key ID: 1587ABD3593755C3
1 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/fiscal-sponsorship/apply/org-adult-form.js
View file

@ -1,4 +1,4 @@
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { Input, Select, Textarea } from 'theme-ui'
import Field from './field'
import useOrganizationI18n from '../organizationI18n'
@ -9,6 +9,17 @@ export default function OrganizationAdultForm({ requiredFields }) {
const onTeenagerLedChange = e => setTeenagerLed(e.target.value)
useEffect(() => {
// [@garyhtou] welp... this exists because the Field component will cache
// input values and set them on page load. It does it by directly setting
// `input.value` with JavaScript; bypassing React. Because of that, the
// `teenagerLed` state may not be synced with the DOM input value. This code
// syncs `teenagerLed` with the DOM input value.
// NOTE: This depends on Field's useEffect hook to run first.
const eventTeenagerLedElm = document.getElementById('eventTeenagerLed')
setTeenagerLed(eventTeenagerLedElm.value)
}, [])
return (
<>
<Field