Onebite.dev

Developer tips & trick, one bite at a time

Developer tips & trick around react


react developer tools guide 2023 This is a simple guide on how to use react developer tools in browser like chrome, firefox or safari to help us, debug and inspect: components, props and state
Passing children on React component results in error objects are not valid as a React child How to solve error objects are not valid as a React child when passing a children into nested React Component
Put conditional logic onClick ReactJs If you need a different behavior of your on click action in ReactJS, depend on if else logic you have, try this
Nested multiple condition on ReactJS How to have a multiple if else condition in ReactJS template that depends on multiple set state variable or just in general
What is type for onClick event in reactJS using typescript What is the correct type when using onClick event in reactJS using typescript
Add class name based on ternary operator result in ReactJS Lets see how we can add a class name based on ternary operator result in ReactJS. Whether a single class name or multiple class names.
Solve Too many re-renders. React limits the number of renders to prevent an infinite loop I got an error on my react app says: Too many re-renders. React limits the number of renders to prevent an infinite loop. How can I solve this?
Solve state variable react can not be read in addEventListener function Today I learned, that we can't access the variable inside addEventListener function we manually write for an element in React, Javascript
Solving the Next.js Head problem that auto parse HTML entity I want to share how I finally solved the Next.js Head problem that auto parse HTML entity. In my case, I want to remove & (ampersand sign) being encoded by Next.js Head.
How to update useState value based on new value reactjs Learn how to update useState value based on new value reactjs. I encountered a problem, where I can't manipulate newest addition on my array that using useState in react
Call method only once in useEffect react Be careful when using useEffect in React. it can bring unintentional behavior you don't want, like calling API multiple times


Colleciton of bitesize articles for developer around react