Questions tagged [reactjs]
React is a JavaScript library for building user interfaces. It uses a declarative, component-based paradigm and aims to be efficient and flexible.
441,957
questions
0
votes
0
answers
7
views
Using useMediaQuery how can we make the screen responsive?
Using useMediaQuery in react responsive, how can we make the Login component responsive for following resolutions ? Could someone please advise here ?
1920 * 1080
1536 * 864
and 1366 * 768
import ...
0
votes
2
answers
24
views
Is Bootsrap5 compatible with React 18?
Is Bootstrap 5 compatible with React?
I've read that prior versions of Bootstrap (before version 5) effect the DOM, and therefore are not compatible with React. However, I heard that Bootstrap 5 is ...
0
votes
0
answers
9
views
I am using firebase to delete images, but they are uploaded but not deleted.(using react,typescript,firebase)
const ProfileModal = ({ children, onClick }: ModalCloseProps) => {
const [attachment, setAttachment] = useState<string | ArrayBuffer | null>(
null,
);
const fileRef = useRef<...
0
votes
0
answers
11
views
Not allowed to load local resource problem?
i'm trying t use Backpack React Scripts but it won't run the local resource,
i tried to change the DNS server and use web server for chrome but it did't work
any help please?
i'm trying t use ...
0
votes
2
answers
27
views
Error passing function to child component react (Uncaught (in promise) TypeError: result is not a function)
I want to pass the result from an api call made on the child component to parent component so:
PARENT:
const Parent = () => {
function logFunction(resultFromAPI) {
console.log(...
0
votes
1
answer
23
views
ReactJS How to synchronize my text input and button?
I am working on a simple search bar. The input label read a string and once the content is changed the state inputString is updated. Once the user click the 'search' button, we split the 'inputString' ...
0
votes
0
answers
11
views
Vercel response.json() returns as HTML in production
I made a react app with vite. I fetch json from my data file locally via
const response = await fetch('/src/data/dishes.json');
In the network tab, I can see the response fine on my localhost. But in ...
-1
votes
1
answer
16
views
Syntax error when using react.js Ref to call a function
x Expected ',', got '.'
,-[E:\projects\Coding Stuff\MyThing\thingymajig\src\pages\MainMenu.js:13:1]
13 |
14 |
15 | function BeginTransaction(
16 | inputRef....
0
votes
0
answers
12
views
In Next.js 13 app directory, how do I incrementally generate new pages?
I have multiple items from a CMS. /items/1 all the way to /items/9999. The content is immutable, so I don't have to worry about revalidateing them.
However, items do get added to the CMS frequently, ...
0
votes
0
answers
12
views
How to full the rest space of React component with canvas?
I am a newbee to react and CSS. I have a problem about styling. Here is how my webpage looks like now:
<TopMenu> is a commandBar component from Fluent ui7. <ControlPanel> is non-modal ...
0
votes
0
answers
10
views
Keycloak 20.0.3 logout not working in react app (invalid redirect url)
I am trying to authenticate my react app using keycloak. The app is not able to successfully logout. I have setup the admin console to contain the post logout redirect url to be http://localhost:7171. ...
0
votes
0
answers
10
views
Docker image builds locally but not remotely
I'm new to Docker/AWS and trying to learn how to use these technologies. I have 2 apps: A ruby on rails API and a react application for the front end. I created a free tier AWS EC2 instance "...
-1
votes
0
answers
4
views
React - is there a way to return JSX which contains braces? [duplicate]
I'm not sure how to return something which has curly braces.
I'm wondering if this can be done.
I tried double braces and some other things but nothing worked.
(The braces are to apply styling - it's ...
0
votes
1
answer
14
views
Uncaught TypeError: Class extends value undefined is not a constructor or null
I have a problem with react component,then,Uncaught TypeError: Class extends value undefined is not a constructor or null.I try to delet the 'extends React.Component',but It`s fale..thanks for your ...
0
votes
0
answers
9
views
remix run useFetcher to post an array and then get the array in the action
I am using remix run.
I am using the useFetcher hook to submit an array. However when I receive it in the action of the route it is being submitted to, it has changed from an array into a string.
I ...
0
votes
1
answer
20
views
React (useState): Changing an Object Property from Child Element
Hello guys I'm having hard time on changing a single object property from another from child side.
import ComboData from './ComboData.js'
export default function BasicTabs() {
const [country, ...
0
votes
1
answer
18
views
Module not found: Can't resolve '@/styles/globals.scss'
This is the error message I am getting with my import statement for the scss file in my _app.tsx. How do I resolve this?
I am using Next.js & I've tried almost everything on the web
0
votes
0
answers
9
views
Lazy load react-hot-toast
I'm looking to remove react-hot-toast from a common bundle loaded for every user and place it in it's own bundle, only to be loaded when needed. Majority of my users don't ever see toasts during their ...
0
votes
1
answer
19
views
NextJS Error: Hydration failed because the initial UI does not match what was rendered on the server
I am getting the following errors in my nextjs application:
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Error: There was an error while hydrating. ...
0
votes
0
answers
4
views
Trying to run Storybook out of separate repo from components/stories, dies on loading ES6
I have a mature CRA-based React app running with Webpack 5. I would like to have a separate project (in git, etc) where Storybook lives and points to the components in the app. (The app has tons of ...
0
votes
0
answers
14
views
React Axios CORS request unable to see any response header
Hi I have a frontend being served for testing from localhost making request to backend running at api.whatify.io which is an Nginx server fronting a Django backend.
The client app code is:
const ...
0
votes
0
answers
8
views
How to use tensorflow ai trained text model in react
i have created a simple chatbot model in python from a video tutorial.
Now i have read that i can use this model in react with tendorflow.js lib but i cant get it to run. I searched around a while but ...
-1
votes
0
answers
16
views
How to import 'catch all routes' component in Next.js into test file?
I am trying to import 'catch-all routes' component in Next.js into my test file in test folder (located in the root directory). The import in the test file is as follows:
import MyComponent from '../...
0
votes
0
answers
10
views
React native calendar markedDates not updating value
I am using calendarColorData in the markedDates parameter and setCalendarColorData to set my state but the value is still not updating on the calendar. I understand that you have to treat the ...
0
votes
0
answers
3
views
Uncaught (in promise) FirebaseError: Expected type 'pa', but it was: a custom Dl object
Creating a custom hook and coming across this issue. Project is being used on firebase v9 after originally being done with firebase v8. Trying to get a document based on the id. Created a custom hook ...
0
votes
1
answer
19
views
Double-clicking button to render another component using conditional rendering
I'm using react-router-dom to link two pages by pressing buttons.
If I add conditional rendering to Link, it requires double click to render the second page.
Here is the Page_1 component:
import React ...
0
votes
0
answers
8
views
Three.JS: Drawing texture directly to canvas
I want the user's 2d screen to be overlaid with a canvas so that the texture is drawn in that scene area.
The article below didn't work for me.
another question
If you have any ideas, please help.
0
votes
2
answers
48
views
How to avoid a function to be called twice when the state changes?
I have this react component
const [filter, setFilter] = useState(valueFromProps);
const [value, setValue] = useState(valueFromProps);
const initialRender = useRef(true);
useEffect(() => {
if (...
0
votes
2
answers
44
views
Each child in a list should have a unique "key" prop in table React
I don't know where is the error I'm getting in the console, everything seems fine, does anyone have any idea what could be wrong?
Unique key error
<TableBody>
{announcements.map((announcement)...
-1
votes
1
answer
34
views
How to use context with react typescript? [closed]
I'm working through a react course on udemy and trying to refactor to typescript as I go. We're building a reading list application and we're in the unit dealing with context.
The following is App.tsx
...
0
votes
3
answers
45
views
Passing state from parent to children in React Nextjs
I am a beginner in React and I am facing an issue to pass a state from parent to children.
That's my code :
import Footer from './Footer';
import Header from "./Header";
export default ...
0
votes
2
answers
19
views
React Query Hook Not Running On Initial Load
Here is my React component. The hook I am trying to get to work is useGetNotesQuery.
On initial load of the component, it does not run. If I tab switch, or create a new note, then the hook will be ...
0
votes
1
answer
15
views
react-number-format doesn't work with Formik and Mui
I tried to use react-number-format with mui TextField and Formik, when I submit the form I get a required error. Its seems that nested TextFiled with react-number-format can't get the values.
I tried ...
0
votes
0
answers
11
views
How can I enable and store the record Night mode in react?
I have been trying to get night mode to work using different guides as resources and have gotten to the point where I can get the page to load properly but I am unable to get the night mode to enable ...
0
votes
1
answer
24
views
Type 'number' is not assignable to type {}
Completely new to TypeScript.
I've recently done a refactor on a colleague code and implemented Typescript, since then I've been covering the bugs, but I can't seem to solve this one. Any help would ...
0
votes
1
answer
11
views
How Do I Add Aria rowheader and rowgroup Roles in AG-Grid?
I’m wondering how to add role="rowheader" to the first cell of AG-Grid rows and add role="rowgroup" to the entire row? I have a large data table where the first column needs to be ...
1
vote
0
answers
15
views
Cannot destructure property 'success' of 'userUpdateProfile' as it is undefined
My screen is not showing up, I have this due in the next 24 hours and would appreciate some help, i would be greatful if i had assistance, i have been working really hard to make this work. assistance ...
0
votes
1
answer
9
views
Error handling response: Error: Blocked a frame (...) from accessing a cross-origin frame
I am fetching a calendly embed link dynamically into a next.js13 app, and technically, it is working. However, sometimes the embed doesn't fetch, resulting in a screen that looks like this:
ONLY upon ...
1
vote
1
answer
16
views
"`ref` is not a prop" warning testing React components with forwardRef
I have a React component implemented with forwardRef:
const Checkbox = forwardRef((props, ref) => {
...
return(
<input ref={ref}
...
/>
)
}
Then in unit tests, ...
0
votes
0
answers
10
views
App crashes when i try to import store into .ts file
I get this error:
index.tsx:10 Uncaught TypeError: Cannot read properties of undefined (reading 'tabsData')
store/index.ts
const rootReducer = combineReducers({
SchemaTypesSliceReducer,
...
0
votes
2
answers
22
views
Problem receiving Axios post data from reactjs app using Golang
I have a locally hosted webpage using reactjs that sends an Axios post to port 9000. I have a Golang server listening to that port and it recieves the post. It then decodes the post but never gets any ...
0
votes
2
answers
29
views
How to bind a react hook to an element created by jquery function
I'm working with a project written in jquery and I want to integrate this code in my react project. I'm trying to send a query to my graphql server by clicking a button.
There is a JQ function that ...
0
votes
0
answers
9
views
React render validated Excel columns to a component
I am in a very complicated situation. I have a React component which is a drag and drop that takes an excel file. I am required to validate some columns from the Excel file. This part I already ...
0
votes
1
answer
19
views
Adding React to a site; use of hooks/functional components
I am very new to react and need to rebuild two Angular.js components within a .NET Content Management System (Kentico). I do not believe there is an opportunity to run a react app/component through ...
0
votes
1
answer
8
views
CountDown is not rendering correctly on React
I have a chat app on React and when chat can not connect, reconnect modal (ant d) is opened
And I want that, when I click the ''reconnect``` button, the countdown must work. But it only works when I ...
-3
votes
1
answer
19
views
How can I solve: use effect missing dependency? [closed]
React hooks. Use effect missing dependency(https://i.stack.imgur.com/n54oH.jpg)
I'm waiting for a solution
0
votes
1
answer
10
views
(loading other video) while the first video play - react player
my case is when the video is playing and the user want to move to other one, the (react-player) has the white screen until the the other video is loaded, then the other video will start ,
what I want ...
0
votes
0
answers
9
views
Mui Snackbar autoHideDuration gets paused when page/tab is out of focus
I've been using MUI Snackbar and its autoHideDuration option but while testing I noticed that when the page is out of focus, like when you go to another tab, it's paused and the snackbar stays ...
1
vote
0
answers
9
views
How to use the OpenAI stream=true property with a Django Rest Framework response, and still save the content returned?
I'm trying to use the stream=true property as follows.
completion = openai.Completion.create(
model="text-davinci-003",
prompt="Write me a story about dogs."...
0
votes
0
answers
20
views
Next.js typescript vscode snippets not working as expected
I'm trying to create new nextjs app
but currently facing issue with some setting in typescript config somehow stopping snippets from working
tsconfig is as follow:
{
"compilerOptions": {
...