Category "reactjs"

Conditionally return ForwardRefExoticComponent and FunctionalComponent

I have created a wrapper on MUI TextField component i.e. TextFieldWrapper with custom stylings and validations. It is being in the app in many places. The probl

What does "hydration mismatch" mean in React or Vue?

While using both Vue and React, I regularly stumble upon so-called "hydration mismatches". What does it mean?

unable to display only year in react datepicker

Here is my below custom component for datepicker with yyyy format return ( <DatePickerWrapper disable={disable} > <DatePicker

Next.js: Error: React.Children.only expected to receive a single React element child

I'm having a component called Nav inside components directory and it's code is some thing like below: import Link from 'next/link'; const Nav = () => {

Proper way to use react-hook-form Controller with Material-UI Autocomplete

I am trying to use a custom Material-UI Autocomplete component and connect it to react-hook-form. TLDR: Need to use MUI Autocomplete with react-hook-form Co

CSRF cookies not set - React, JWT, Django

I'm rather confused regarding the following error: "Forbidden (CSRF cookie not set.)". This error is received during attempting to logout, login, signup. The pr

Redux store takes lil bit time to update store which causes else block to execute and hence get redirected to unintended page

//PrivateAuthComponent.js import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; import { useRouter } from "next/router"

Props conditional rendering using styled-components

I am using styled-components library inside a React application and I have this block for example: const Wrapper = styled.div` background: red; `; I need t

React ERROR:TypeError: Cannot read property 'pathname' of undefined

This is my Menu component. I later import it in routes.js. I am getting this error. TypeError: Cannot read property 'pathname' of undefined After searching

React router component not destroying when user leaves the page

I have a video player (jsmpeg player) that opens up a websocket to a server to play live video. The way the video server works is that it counts the number of c

Should I use event delegation, to be economical with JS-events at i.e. table cell level?

If I have a table in which I want to react to table-cell events, is it better to put the event on the table-element and handle cell specific events with the hel

When downloading a file using ResponseEntity in Spring, byte breaks in reaction

This is a method of downloading files from Spring to ResponseEntity. When you download it, the byte breaks and comes out. If you use tag a, you can download the

How to send body data and headers with axios get request?

I've tried axios.get(url, {headers:{},data:{}}) But it doesn't work with this.

ReactJS bootstrap button as a link (new tab)

I investigated a lot of topics about using button as a link but didn't found a solution for me - I need to open a certain page in a new tab using React bootstra

Error creating react new project. using create-react-app

I am facing issues while creating a new project for React. Here is the command for how I am creating react project. npx create-react-app helloworld But the pro

Moved from React Native Stylesheet to Styled components. How to add elevation when styled components do not recognize elevation as a property?

I have the following simple component that used React Native Stylesheet up until now, but right now I'm trying to move onto Styled components. I'm just a bit co

How to set maximum line of text using flex css react

I'm having a screen like this But it look actually not so good if the title or author is so long, so i wonder how can i set maximum of text line to fixed numbe

Custom tooltip React ChartJs

I'm having an issue while creating a custom tooltip using react-chartjs-2 library where my chart rerenders whenever I hover the chart and change the state of th

Using react dev tools inside iframe [In Chrome]

When react app is inside an iframe, dev tool chrome extension for react is not working. Refererd: https://github.com/facebook/react/issues/18945 Solution sugges

jquery modal('hide') method is not working in reactJs

I have a login modal that is toggled by a button with data-toggle and data-target attributes. After doing the authentication, I need to close the modal so I use