When I build admin portals and employee dashboards, I rarely want every card, panel, or page section to have fixed content. A reusable React component should provide the shared structure while letting each screen place its own headings, tables, forms, or buttons inside it. That is exactly what a React component with children solves. The children prop … Read more >>
React prints this warning when one component changes another component’s state while it is rendering. Depending on your React version the text is either “Cannot update a component (Parent) while rendering a different component (Child)” or the older “Cannot update a component from inside the function body of a different component”. Both mean the same … Read more >>
react-vertical-timeline-component renders a vertical timeline in React: a centre line with cards alternating left and right, each with a date and an icon. You install it, import its stylesheet, and put a <VerticalTimelineElement> inside a <VerticalTimeline> for every event. This guide builds one step by step, with a screenshot of what each version actually renders, … Read more >>
A common problem in a React dashboard happens when a user opens a customer details page, starts loading data, and quickly navigates away. The API request finishes afterward, and the old component still tries to update its state. I have seen this issue often in real-world React applications with API calls, timers, subscriptions, and delayed … Read more >>
A React date picker component gives users a calendar to choose a date from instead of a free-text field. You have two realistic options: the browser’s own <input type=”date”>, which costs nothing and looks different in every browser, or the react-datepicker library, which is the one most projects mean when they say “React date picker”. … Read more >>
A Gantt chart shows tasks as bars on a timeline, with dependencies between them. In React you have two sensible routes: install a library, or build a small chart yourself with CSS grid. This guide does both. The library part uses gantt-task-react, which is free, MIT-licensed, and gives you dependency arrows, drag and resize, progress … Read more >>
You cannot use React hooks inside a class component. Hooks only work in function components and in custom hooks, and React throws an error if you call one from a class. There are three practical ways round it: wrap the class in a small function component that calls the hook and passes the values down … Read more >>
A React component not rendering is almost never a React bug. In the great majority of cases it is one of a handful of ordinary mistakes: the tag starts with a lower-case letter, the function forgot its return, the import does not match the export, && put a 0 on the page instead of your … Read more >>
To use a React error boundary with functional components, you still need one class: React has no hook that catches rendering errors, so the boundary itself has to be a class component even in an app made entirely of function components. You write that class once and wrap your function components in it. The usual … Read more >>
When I build a sales activity dashboard, I often start with a parent page that pulls together several child components: a summary card, an activity list, a filter bar, and a loading panel. Testing the whole screen at once sounds useful, but it can make one small parent-component test slow and hard to understand. That … Read more >>