gui Posts - Answer Overflow

gui

Explore posts from servers

•Created by gui on 4/14/2024 in #support

How to rerender children whenever a signal changes?

Hey there! I'm really new to Solid, so I built a tic-tac-toe game to understand more about it. I got it working having everything written in a single component. After that I wanted to extract part of the code to a new component called Board. However, after doing this, I realized that everything inside the Board component wasn't being rerendered when the squares signal changes. How can we make it rerender on changes to the signal? Is there a something similar to "createEffect" for components? Here is the source code: https://github.com/ubmit/tic-tac-toe-solid/blob/main/src/App.tsx Thanks! PS.: here is the previous commit, before the Board component was created, and when it was still working well https://github.com/ubmit/tic-tac-toe-solid/blob/8b5dd824b58c1cd3a671a23b5583e6d7a2dc69dc/src/App.tsx

9 replies

TTCTheo's Typesafe Cult

•Created by gui 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 gui 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 gui 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