React Tip 💡 You can use 'React.Children.toArray' to let React automatically assign a key to its children.
It's #ChakraUITips time 🤩! If you're working with #nextjs and you'd like to utilize the next/image component, but still want to use @chakra_ui style props, you can use the "chakra" factory function to wrap NextImage and pass down the width, height, src and the other props!
💡 React tip: You can save some lines of code by using "useContext" inside your theme context JS file.
@iorranmc I do separate hooks in the same file. QueryKeys are generated with a function, something like this:
6️⃣ JSX control statements A throwback solution that uses component syntax to write conditions. It ultimately transpiles code down to ternary statements It likely won't play nice with TypeScript so I'll stick with the other solutions (babel-plugin-jsx-control-statements) 🧵👇🏾
3️⃣ Inline ternary Allows for returning UI for both the `true` & `false` cases Depending on how much UI is rendered in the `true` case, it could be hard to figure out where the `false` case starts. But again Prettier formatting makes things better 🧵👇🏾
4️⃣ Component early return Instead of conditionally rendering a component, have the component itself decide whether or not to render This moves the conditional rendering to a single place when multiple components use this component 🧵👇🏾
5️⃣ Helper function When multiple variables are needed to calculate a condition or lots of UI is conditionally rendered, we can move it to a helper func to keep everything together (you can even make this inline by using an IIFE 🤪🤯) 🧵👇🏾