ironnator Comments - Answer Overflow

ironnator

•Created by DrewHack on 8/22/2023 in #questions

Pretty Basic (I think) React / Tailwind / Next question

Okay. So.... if you want "child" components to influence something that is overarching, the best thing to do is to use React Context. Might need to watch a tutorial or two. But basically your layout.tsx would have something like:


<ThemeProvider>
{children}
<ThemeProvider/>

Usually most people would create a contexts folder, with a file called ThemeProvider.tsx and in there you would use React.createContext, create a component ThemeContext and export const useTheme = React.useContext(ThemeContext). (I can't really dictate out exactly what that would look like right at this second, but there's tons of tutorials). And then in your component, you would call const { currentColor, setColor } = useTheme() or something that you've created.

9 replies

TTCTheo's Typesafe Cult

•Created by DrewHack on 8/22/2023 in #questions

Pretty Basic (I think) React / Tailwind / Next question

For example, if your Sidebar button is calling setColor, then setColor needs to be defined as a prop in the component. So const Sidebar = (prop) => {} and your RadioGroup onChange handler would call prop.setColor. You also have setColor on the Layout, instead of the page.tsx. But there's no easy way to call setColor on the Layout without doing more complicated stuff. So for simplicity, I would do the setColor stuff on page.tsx, get that working, and then maybe look at the Layout stuff later. The tutorial doesn't actually mention using layout / app router, and instead stores the preference on local storage. Maybe try and get that working

9 replies

TTCTheo's Typesafe Cult

•Created by DrewHack on 8/22/2023 in #questions

Pretty Basic (I think) React / Tailwind / Next question

@drewhack Best thing to do to get others to help you would be to post your repo. It's hard reading chunks of code without knowing the full context (i.e. what does your layout.tsx/page.tsx/ and sidebar component look like).

9 replies

TTCTheo's Typesafe Cult

•Created by Eylon on 3/3/2023 in #questions

Why is my prisma model typed as any?

This happens to me randomly throughout the day. I used to do the restart TS server, and if not, restart VS Code. But recently, I've just added a random line of code and it seems to get back on track, so something like a console.log('') lol

24 replies

TTCTheo's Typesafe Cult

•Created by Gaden on 12/2/2022 in #questions

Best state management for react chrome extensions?

Maybe local storage? Lol might depend on what you’re storing in state

23 replies

TTCTheo's Typesafe Cult

•Created by domi? on 9/22/2022 in #questions

Typesafe access of 'unknown' type

Currently, I don't think there's a real nice way. You can hack around it by casting it to your own custom error object as you mentioned. But the type safe way to do it (for now) would be some sort of type guard function - found this thread which might help. https://stackoverflow.com/questions/70028907/narrowing-an-object-of-type-unknown

15 replies

TTCTheo's Typesafe Cult

•Created by scatter on 9/23/2022 in #questions

change query params without rerender

I might not be understanding your question fully, but if you're trying to trigger it to refetch (say for an input change), the second param on the useQuery hook would do that for you. From their docs: https://tanstack.com/query/v4/docs/examples/react/basic

function usePost(postId) {
  return useQuery(["post", postId], () => getPostById(postId), {
    enabled: !!postId,
  });
}

function usePost(postId) {
  return useQuery(["post", postId], () => getPostById(postId), {
    enabled: !!postId,
  });
}

So when the postId changes (or in your case, you would put the inputValue instead of the postId), it would trigger the refetch.

5 replies

Gaming

Programming