I’m using React 16 and need to call a conditional setState inside componentDidUpdate. setState is executed asynchronously. So, usually, if I need to use state to compute my next state I should use updater function as an argument to setState. React 16 added a possibility to cancel a setState update by re…
Tag: reactjs
How to get pathname in the layout file in gatsby
I am working with gasby and here the main file is always layout.js which is the parent of them all. Since it is a parent file then how can I get a location props this.props.location.pathname inside it? Here is my layout component Answer As stated in the Gatsby docs: In v1, the layout component had access to h…
Setting custom directory for server files for Next.js
Rather than in the root directory, I want to keep all my backend related files inside a folder named ‘server’. The problem is now the frontend won’t load properly as it can’t find the ‘pages’ directory. I remember there was a way to set the directory somehow when initializi…
Refactoring from classes to functions – ways to enhance in functions
I am trying to rewrite class components to functions. Often, I have an enhanced component as class property: When writing function, I have to move the enhancing outside of function body, or it will get re-mounted on each render. Table is an external Component (devexpressGrid), but I suppose it does something …
how to fix “Cannot read property ‘comments’ of undefined” in react
I am extracting array “comments” from an array of objects and when I trying to pass this array to a function I get this error “Cannot read property ‘comments’ of undefined” here is a snippet from my code. in main class, I succeeded to get from DISHES array the right element…
how to show the pdf in a modal instead of opening it in a new window in react js
I have created a pdf file using blob text in react js and using “window.open(fileURL, “_blank”)” i am able to see the pdf in a new window. But now my requirement is just to show the pdf as a modal in ui and when clicked on the modal it can be viewed in another window.Can anybody please…
Formik, Yup Password Strength Validation with React
I am fairly new to React, and i have a sign up page where i have a password field to be validated with a Regex. I am using Formik and Yup for validations, but i have encountered an error where it says the property where the length function is being called is undefined when i type in the “password”…
How to search in a json array, and return the result as I type in the input
So far I can only search an element of the array if I type the exact name present in my api, in this my api has an array with 20 positions and if I type exactly the name of the element I search it returns an array with 19 positions with undefined and 1 position with the array found, what
Center component inside the material-ui grid
I want to use same cards and make them center aligned, I searched and tried some solutions but all of them align only the component grid, and not the component content itself (I need them to be equally distant form the borders and from themselves). I’m using this code (https://codesandbox.io/embed/32o8j…
How to make sure a React state using useState() hook has been updated?
I had a class component named <BasicForm> that I used to build forms with. It handles validation and all the form state. It provides all the necessary functions (onChange, onSubmit, etc) to the inputs (rendered as children of BasicForm) via React context. It works just as intended. The problem is that n…