ubmit Posts - Answer Overflow

ubmit

Explore posts from servers

•Created by ubmit on 5/15/2023 in #questions

How can I get the input field values from formData (using Next form action)

I’m probably missing something here, but I thought that formData.get(inputId) would work 🫠 Here’s is the code from a basic form I’ve just written to play around:

export default function BasicPage() {
  async function handleSubmit(formData: FormData) {
    'use server'

    const firstName = formData.get('firstName')
    const lastName = formData.get('lastName')
    const email = formData.get('email')
    console.log({ firstName, lastName, email })
  }

  return (
    <main>
      <span className="block h-16" />
      <h1 className="text-6xl font-bold tracking-wide">Basic</h1>
      <span className="block h-8" />
      <form action={handleSubmit}>
        <label htmlFor="firstName">First Name</label>
        <span className="block h-2" />
        <input
          className="w-full rounded-sm px-3 py-2 text-gray-700"
          id="firstName"
          placeholder="John"
        />
        <span className="block h-4" />
        <label htmlFor="lastName">Last Name</label>
        <span className="block h-2" />
        <input
          className="w-full rounded-sm px-3 py-2 text-gray-700"
          id="lastName"
          placeholder="Doe"
        />
        <span className="block h-4" />
        <label htmlFor="email">Email</label>
        <span className="block h-2" />
        <input
          className="w-full rounded-sm px-3 py-2 text-gray-700"
          id="email"
          placeholder="[email protected]"
          type="email"
        />
        <span className="block h-8" />
        <button
          className="w-full rounded-sm bg-gray-700 py-3 text-gray-50 hover:bg-gray-600"
          type="submit"
        >
          Submit
        </button>
      </form>
    </main>
  )
}

export default function BasicPage() {
  async function handleSubmit(formData: FormData) {
    'use server'

    const firstName = formData.get('firstName')
    const lastName = formData.get('lastName')
    const email = formData.get('email')
    console.log({ firstName, lastName, email })
  }

  return (
    <main>
      <span className="block h-16" />
      <h1 className="text-6xl font-bold tracking-wide">Basic</h1>
      <span className="block h-8" />
      <form action={handleSubmit}>
        <label htmlFor="firstName">First Name</label>
        <span className="block h-2" />
        <input
          className="w-full rounded-sm px-3 py-2 text-gray-700"
          id="firstName"
          placeholder="John"
        />
        <span className="block h-4" />
        <label htmlFor="lastName">Last Name</label>
        <span className="block h-2" />
        <input
          className="w-full rounded-sm px-3 py-2 text-gray-700"
          id="lastName"
          placeholder="Doe"
        />
        <span className="block h-4" />
        <label htmlFor="email">Email</label>
        <span className="block h-2" />
        <input
          className="w-full rounded-sm px-3 py-2 text-gray-700"
          id="email"
          placeholder="[email protected]"
          type="email"
        />
        <span className="block h-8" />
        <button
          className="w-full rounded-sm bg-gray-700 py-3 text-gray-50 hover:bg-gray-600"
          type="submit"
        >
          Submit
        </button>
      </form>
    </main>
  )
}

3 replies

TTCTheo's Typesafe Cult

•Created by ubmit on 2/7/2023 in #questions

Not being able to render my React app

I don't why but I felt like trying to setup a minimal React setup using Babel. I created the HTML and added both the script tag to load the output from babel and the div with id root to be used as the entrypoint for React. However, things aren't working somehow 🫠 The JS is being loaded by the browser but nothing is rendered somehow. It seems like I missed something simple that I'm not being able to spot. Can someone help me finding it, please? praydge

Here is the repo: https://github.com/ubmit/barebones-react-experiment

4 replies

TTCTheo's Typesafe Cult

•Created by ubmit on 9/24/2022 in #questions

How could I improve this code?

I wrote this code and even though it works I feel like there should be an easier and better way to write it that I simply don't know how. The main part I think could be improved is the findSportEvents function? Could someone review it please? 🙏 https://www.typescriptlang.org/play?#code/C4TwDgpgBAymD2AnYBRAbhAdsKBeKA3gFBRSYCGAthAFxQDOwiAlpgOYDcJUiE9ArgBtgdRi3ZcAvlyIBjeJkawACgHkASgBUA+igBqKAHKaYdAIKJE5EAB44SVBmwA+PFADa3AmSq0oAcjMoNHooACF-ABoePiERAIBGAFoABn8oSUivH2o6fwBhYNCAESiYgWE85IAWdMzsilyAlCKoADEy3gr4-2qk2oysgF0ZADN+TFlgZgUYjGQYJlY2AAoxUSX2AEpCbl5gfkRMBiYAOnowQWZgFf9-LdPeefoIFYeAK3hWW-upIiJxpNprMwOREC91LFhCsunENuI2DtiKR5IocKNmODgDB5Lw3KDwRAAJLYGFQ4BbLgohRKF6ogAmOKQ0HwBJeJJuTwgC02q1hwi2lP+pH2h2OyNIUGA8GA5EEAHF4HL6HQMVimXiANQMCAMjUQLKSqBsJWCehmAnxACy5GAAAtTuQAEb0FZqxj6qBJHV63EQLaGjJ-IgAehDUrtzFCgKmM2O9Dt8CE9JiByOUHIx3gTveupw8FGEegoEghCgTuYbDYfGAAHVWHR7Mh0FhgNFKMzFcrGwhm04cJJQ+GAO527nQCtVmv1+OJ5MxWQQZgYItQCD9qCj5iyO2r-k4O3kFP2ieV6uIY2m0LkS1DjOYFMd3hds0MOeCFO8RfL4tjtcbrcdygQ9H2ZS9lSgVgpRlOUAQmWNZgxB8m0cVtXXXNDzEsaw7F7VCXCRbhBAgHB6Vtcg6AlUgTWVC0wXiTB+EoJ1uSpSVpVlBUrzoRjmNY7hSEnatGBnHsHBbbA2NIJ8IBfFVYDwiTgDY6RhX-NDTlGJAUHIHcVjWRT+2iZh6QADx2XBXCoqBUSUbwaLNOjkGiDi5TkjJ8TBCFyQM8T+0eckhQEyDCxWEzTLwXB8BSQijVIMjZTcayjQc81LUDOLoM4uSMrioTpwbBhDNbXKjRkuTRGK7BSqDNSjVFI4pIyOqbJpHAozkpzgDCM9uTcVKuqgVwEvIU4BstJrbPa+hNBgrjlR6qcL3wVz5tfYbyNOVa5JkI1mFCgBCDqry6xbzygAAyC6oCOma5rks7uR2BrMF2yURqS4LqJOy06GO2jLUei8AH5wMcy0oDoEaxp++iau27jILu7KryBqBQYRiCoc2zGzRq-KRMK-7wfotHQYuPzW0hqBoYJutWBq8rEajWaUYW3qQaKynsGp6GmeVXLVNISQgpFEixV2I06dEmnyIO05pYZ4L+bNbHZXllX6EDVTBzvCBTMgKYIBTJNgDAfgRDvYgw0lRXMEonI-AKVpSmifcqn6Oosht6TO0R7xGidloQnaTpyTyPoBkHG3dds+BiNOQR4FWJDGSq4BXRgNQtF0AxjBgQUuCAA

12 replies

Gaming

Programming