Click here to Skip to main content
15,891,136 members
Everything / ReactJS

ReactJS

ReactJS

Great Reads

by Valerii Tereshchenko
Comparison of different ways of handling side effects in React
by Modesty Zhang
A simplified approach to enable an array of reducers in a React/Redux web application with existing reducers and selector pattern.
by Rahul Sabharwal
This article details the migration steps from Webpack 3 to Webpack 4.
by Modesty Zhang
A practical example of utilizing Reactive Extensions RxJS for autonomous states in React components with greater expressiveness and concise code.

Latest Articles

by Fred Song (Melbourne)
A responsive React frontend interacts in real-time with a .NET 8 Minimal API backend to dynamically display and manage state transitions for a simulated traffic light system.
by Akram El Assas
Car Rental Platform with a mobile app
by Akram El Assas
Rental Property Management Platform with a Mobile App
by Akram El Assas
Open Source eCommerce Platform on Next.js

All Articles

Sort by Updated

ReactJS 

U 2 May 2024 by Fred Song (Melbourne)
A responsive React frontend interacts in real-time with a .NET 8 Minimal API backend to dynamically display and manage state transitions for a simulated traffic light system.
U 29 Apr 2024 by Akram El Assas
Car Rental Platform with a mobile app
U 29 Apr 2024 by Akram El Assas
Rental Property Management Platform with a Mobile App
18 Apr 2024 by OriginalGriff
Answered only to remove from unanswered queue - solved by OP.
17 Apr 2024 by daniel wakeley
So I'm working on a project in React and added in some text into my hero section over the image. The problem is the text has a white background. I've never encountered this problem before. What I have tried: I've tried going through every...
13 Jan 2024 by Gcobani Mkontwana
Hi Team I have created a unique back end port to listen to 3001, but when i call this port on my front end for registration end point logic to listen to 3001. It gives me 404 status when inspect and it fails. What am missing and how do i fix...
8 Jan 2024 by Harshith M from Hyderabad
I'm trying to send a message to the receiver from frontend. As per backend it worked fine. But in frontend I had a pretty hard time to implement the backend code in the frontend to send a message to the receiver. I'll lend you my server side code...
24 Dec 2023 by Member 12214576
I'm trying to implement a multi-language React JS website I have implemented the translation files and language buttons and the translation is working but what I need is to change the layout of the pages I'm using Bootstrap v5.3 on my project, I...
22 Dec 2023 by Richard MacCutchan
As your problem is specific to the NMI system, you should use their help forum.
21 Dec 2023 by sahil ajmeri 2022
I am using a NMI for payment Integration. I have created NMI API for adding custom subscription using this documentations I am using webhooks API endpoint to get those information and status of payment and subscriptions. where I am getting add...
18 Dec 2023 by Uwill18
Hello All, I am following the tutorial below and I'm at around 2 hours and 37 minutes: https://www.youtube.com/watch?v=uoJ0Tv-BFcQ&t=9445s I am wondering why my charts aren't showing for recharts when my code below is as follows: import...
11 Dec 2023 by Jithu_007
I am encountering a problem with the visibility of screen share in my WebRTC application. Our focus is solely on implementing screen sharing without involving video calls. I have successfully received all SDP answers and ICE negotiations, and I...
24 Nov 2023 by daniel wakeley
Okay so I'm making a project that let's a user query an api using their own input. I want to create a webhook or websocket system that when a user creates an api query a new websocket connection is made and listens for matches in the query...
10 Nov 2023 by Maciej Los
Start here: Create Cascading Dropdown In ReactJS[^] This all what you need (country->state->city)!
10 Nov 2023 by pooja pooja 2023
I want to show country dropdown and state dropdown based on selected country and show city dropdown based on selected country and state What I have tried: I tried to show country dropdown and state dropdown based on selected country and show...
5 Nov 2023 by pooja pooja 2023
I am creating a project using React and Express JS. Here, I try to send pdf to whatsapp using twilio, but it shows a few errors to show pdf and tells that I have to save pdf in public url. What I am expecting is to send pdf to Whatsapp by saving...
29 Oct 2023 by M Imran Ansari
This is because Twilio requires the media file to be hosted on a publicly accessible URL to be sent through WhatsApp. To accomplish this, you can upload the PDF to a cloud storage service such as Amazon S3, Google Cloud Storage, or Azure Blob...
29 Oct 2023 by Pete O'Hanlon
There are two ways to upload PDFs to WhatsApp using their Business API. You either have to host the PDF in a public location, or you have to upload the PDF to the WhatsApp servers first, and then use that. If the POST message you send to WhatsApp...
25 Oct 2023 by sahil ajmeri 2022
I have two dropdowns, machineType and machineProblem. I want to get machine problems using machineType selected in the Dropdown, I have an API for getting data from the database collection named machinetypeproblems. I want to show all the...
10 Oct 2023 by ernie lipford
I'm using the react asp.net core preview project with Visual Studio 2022. I have created a controller called WordController. My vite.config.js is as below. When I run the application, however, the request still keeps resolving to...
7 Oct 2023 by Jithu_007
I am currently working on implementing OAuth 2.0 in my React application for user authorization. To achieve this, I have set up a custom Auth Provider with all the necessary configurations, such as the client ID and client secret. Here's the...
2 Oct 2023 by Jithu_007
I am facing a CORS issue when trying to make OIDC login requests from my React frontend to my Express.js backend, which acts as a Backend for Frontend (BFF). The specific issue occurs when my backend generates the authentication URL (authURL) for...
1 Oct 2023 by flyshivanshu
export default function UserProfile(props) { const { isLoggedIn, user, profile } = useSelector((state) => state.AuthReducer); const { wallet, paired_curency_price, coins, wallet_loading } = useSelector( (state) => state.coinDBReducer ...
30 Sep 2023 by OriginalGriff
Quote: bro plese send solution in this code While we are more than willing to help those that are stuck, that doesn't mean that we are here to do it all for you! We can't do all the work, you are either getting paid for this, or it's part of...
30 Sep 2023 by Graeme_Grant
This is a very common, so there is lots of documentation, tutorials, and examples on this. Here is a Google search with many answers for you: react working with the input field - Google[^] Here is the official documentation with examples:...
28 Sep 2023 by Richard Deeming
res.redirect(authUrl); Your AuthPage endpoint is redirecting to https://sso-Myauthserver.com/as/authorization.oauth2. You would need to set up the appropriate CORS headers on that site to allow your JavaScript code to connect to it. However,...
24 Sep 2023 by Member 16099920
you shouldn't delete package.lock
15 Sep 2023 by Jithu_007
I am new to OIDC (OpenID Connect) and need guidance on how to implement an OIDC login flow in my Angular application with a Node.js backend. Below is my backend code for the OIDC flow, but I'm not sure how to integrate it into my Angular...
14 Sep 2023 by Patrice T
Quote: Seeking time estimates for developing these 5 detailed screens in react Take 10 programmers, newbie in react or not, seasoned or not, good or not, familiar with existing partd of the project or not ... And you will get 11 estimates. There...
14 Sep 2023 by Mohamad Shoumar
My manager wants me to determine in what time frame they can be done? and how hard it is to implement? He want them for internal use so no authentication is needed. I have a basic understanding of React and its core functionalities, now give me...
13 Sep 2023 by tan25
Uncaught TypeError: Cannot redefine property: visibilityState at Function.defineProperty () at main.js:21:10 localhost:8080/api/v1/dalle:1 Failed to load resource: the server responded with a status of 500...
12 Sep 2023 by OriginalGriff
Repost: Deleted. Please do not repost your question; use the Improve question widget to add information or reformat it, but posting it repeatedly just duplicates work, wastes time, and annoys people. I'll delete this one.
12 Sep 2023 by Richard MacCutchan
This is the same issue as How to get rid of this error ?[^]. Please do not repost. If you have additional information then update the original question.
18 Aug 2023 by OriginalGriff
We can't tell you: we have no idea of your level of experience, skill, or ability; nor do we have any idea what processing is required behind those screens, or what they are meant to do / be for. So just like ChatGPT, any estimate we could give...
24 Jul 2023 by Akram El Assas
Open Source eCommerce Platform on Next.js
20 Jul 2023 by Andre Oosthuizen
Laravel and React not one of my strong points. You need to explicitly pass the 'setMyState' function down from the parent component to your 'ProductsMy' component - Using a function in `setState` instead of an object[^] Remove the '{children}'...
19 Jul 2023 by folza
I have a Laravel 10 project with React. I want to increment the Basket props.myState by 1 after clicking on the "Add to basket" button. It works when I use the ProductsMy component in the States2 component like this:
14 Jul 2023 by Akash Kr. Das
I have a MERN app, used Fetch API. I want to delete specific data upon clicking. Whenever i am clicking on delete its showing 'cannot delete.' and Status is 404: Not Found Here is my front end code please help me with this What I have tried: ...
14 Jul 2023 by Andre Oosthuizen
The problem lies within your 'removeElm' function when you try to laod 'userid - the path to 'demo/users is not found and thus no 'userid' is returned. Some steps to try and find the reason why the file is not found - 1) Make sure your localhost...
21 Jun 2023 by Member 16034634
I am making a blog website and want to implement a search alogithm which would be powered by ML. I took a codecademy course on ML but dont know how to combine MERN with ML. I also want to add a similar posts sections and also an algoritm to make...
21 Jun 2023 by folza
I need a Welcome.jsx page with Login, Register, and Dasboard. Breeze does it. But I want to load components to Welcome.jsx {children} with the Navlinks (the Myfirst.jsx and Mysecond.jsx components). The loading is working when the #authentication...
5 Jun 2023 by Nobunaji
I'm trying to detect the silence inside an audio file using ffmpeg's silencedetect filter and outputting the timestamps inside a txt file. The function runs but no file is created. What I have tried: I've tried the following code : return...
4 Jun 2023 by Nobunaji
Hi, i have the following complex_filter in a fluent-ffmpeg function : .complexFilter([ { filter: "volume", options: [string], inputs: "1", outputs: 'audio', eval: 'frame' }, { filter:...
2 Jun 2023 by Glenn Viroux
A step-by-step tutorial on how to implement your first code editor in React
27 May 2023 by Anandhakumar M
i was generated the hash value for payUmoney UI. i have required data for bolt launch method in payUmoney but the thing is how i call the bolt fuction in react js i got the only one reference -...
24 May 2023 by Артём Орёл
I can not solve the issue with MultipartException? I try to create a new Item with adding the imges React. Every time I receive the error in Spring console, that current request is not Multipart request. I created a form for adding the item...
19 May 2023 by daniel wakeley
So I'm working on a project and when I add in functional components to the page they completely cover each other up. I try adding margin and using all sorts of positioning but to no effect. The page does not produce enough height for them...
19 May 2023 by daniel wakeley
} /> } /> } /> ...
3 May 2023 by tan25
patientmodel.js const mongoose = require("mongoose"); const patientSchema = new mongoose.Schema({ name: { type: String, required: true, }, age: { type: Number, required: true, }, gender: { type: String, ...
2 May 2023 by Harinder bhullar
I have created wweather site using react js. but when i open it on mobiles the overflow not work. here is my code. App.js import axios from "axios"; import "bootstrap/dist/css/bootstrap.min.css" import { useEffect, useState } from "react";...
2 May 2023 by Member 15226818
I was trying to connect to Postman, but I received an error message that says "error: Not Found, path: /api/postService/getPost". Apache Cassandra is also running perfectly, and I have created a keyspace too.Here is my controller class . can...
29 Apr 2023 by Shailesh Sagar
How to transform the below jquery code to react js code. $("#leftside-navigation .sub-menu > a").click(function(e) { $("#leftside-navigation ul ul").slideUp(), $(this).next().is(":visible") || $(this).next().slideDown(), e.stopPropagation()...
29 Apr 2023 by Member 15991719
// sidebar menu active // $("#sidebar li").on("click", function () { // $(this).addClass("active").siblings().removeClass("active"); // }); // sidebar submenu hide/show // $("#sidebar .sub_menu").on("click", function () {...
17 Apr 2023 by Ankan Chanda 2023
Hi, I need help with this ReactJS application in making a Pie chart. So there are three components namely: Devdropdown , the main one and two child ones are Tables.jsx and Chart.jsx. So, the table got displayed while passing props from the...
11 Apr 2023 by Richard Deeming
According to the documentation[^], the value passed to render should be an element, not a string. const sessionExpiredError = (Your session has expired. Please login again via
11 Apr 2023 by ramweb12345
How to add html code in const using typescript? I tried below code but getting html code also. I want display only text message What I have tried: const sessionExpiredError = ' Your session has expired. Please login again via
11 Apr 2023 by ramweb12345
How to use href tag using const in react. I tried below code but getting html code also. I want display only text message� const ExpiredMesaage�= � 'Your session has expired. Please login again via
11 Apr 2023 by Afzaal Ahmad Zeeshan
That is a plain string, so React will render it on the DOM as it is. You can render the hyperlink inside a paragraph. Use this: const ExpiredMesaage = Your session has expired. Please login again via
31 Mar 2023 by User 15929814
I am a beginner and Im trying to connect the dots and learn, my aim is to get the input values and post them to postgresql database as post request. My code so far. What I have tried: import { useState, useEffect } from "react"; import axios...
21 Feb 2023 by tan25
Register.js import React from "react"; import { Button, Form, Input } from "antd"; import { Link } from "react-router-dom"; import axios from "axios"; import toast from "react-hot-toast"; function Register() { const onFinish = async (values)...
19 Feb 2023 by tan25
webpack compiled successfully Proxy error: Could not proxy request /api/user/register from localhost:3000 to http://localhost:5000/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET). I am...
19 Feb 2023 by Andre Oosthuizen
Make sure that your server is running and listening on the correct port. In this case, it should be listening on port 3000, yours seem to be running on 5000. Check that the API endpoint /api/user/register is correct and that it exists on your...
14 Feb 2023 by geomukkath
This might sound like a noob question but I need some help here: ``` export const loginUser = createAsyncThunk( 'users/login', async ({ email, password }, thunkAPI) => { try { const response = await fetch( ...
14 Feb 2023 by Andre Oosthuizen
These might help - How to Pass Data and Events Between Components in React[^] Using Context to pass data[^] How to Pass Data from Child to Parent in React[^] a Snippet from the last link - While there is no direct way to pass data from the...
13 Feb 2023 by Gustavo Rodrigues 2023
I am using the simple-peer and socket.io libraries in a react project, to transmit a video stream and display it to all connected devices in a websocket room, I can receive the stream on the other devices when the stream starts but it does not...
2 Feb 2023 by #realJSOP
I'm using MaterialTable, and I want to add some functionality. This new functionality does not necessarily override default functionality. How can I do that? What I have tried: This is one of the few things I can't find anything about on Google.
25 Jan 2023 by Matthew Henderson 2023
I am using fetch API to get some API JSON data from a remote server and its returning my react index.html file? What I have tried: I tried using response.json() but got an unexpected token error so I changed to text to find that its returning...
25 Jan 2023 by Afzaal Ahmad Zeeshan
Quote: its returning my react index.html file That happens when your server is unable to route the request to the proper router to handle it, and provide a response. If you can debug your server (if you are developing it at the same time!) you...
22 Jan 2023 by Stella Ojideh
*New to coding and desperately need some help* My site looks great on desktop but when opened within a smaller screens (mobiles & some tablets) there's excess space on the right side of the page. And also the navbar completely disappears. Any...
22 Jan 2023 by Graeme_Grant
I am not seeing excessive space on the right, however, you have a few issues, like the disappearing navbar. To fix this issue: 1. CSS Section markers: \\\\ Order CSS \\\\\ should be: /* \\\ Order CSS \\\\ */ 2. If using position:...
18 Jan 2023 by Patrick O'Rourke
Hi, I am working with React with Splunk, namely to create Splunk dashboards with Google maps API. that are generated with React. I have been creating dashboards in Splunk dashboard studio, then using the respective JSON with the google maps...
7 Jan 2023 by 007 007
The application is working perfectly, and the Navbar behaves as expected. However, I don't know why the spacing between my components got suddenly messed up. - App.css doesn't contain anything/doesn't have any code Here's my Index.js: ...
6 Jan 2023 by raddevus
The easiest solution is to first create a variable that you will place in your return statement. What I mean is to create a variable which will hold your current JSX. Then you can decide if the stuff you return contains the extra div or not. ...
6 Jan 2023 by folza
I have a JSON file of products and want to put details into divs. The second div (window) is hidden by default so it needs {isShown && DIV_CONTENT} state. I just want, that the window div let be in the same map function as the divStyle class...
29 Dec 2022 by DKurbanov27
I need to call this logEvent function inside useEffect hook only when the searchTerms string is changed. The problem is that total_result is equal to the previous state of value. So I need somehow get the actual latest value of...
29 Dec 2022 by medium block
I am developing an app where on mouse wheel up and down navigates the user to different routes in the App. I also have animations corresponding to which way the user scrolls: when scrolling down the next route will intialize from below and the...
28 Dec 2022 by Mas Hosseini
In my page I want to show an alert when user tries to close/ reload or go back. I have two useEffects one for handling reloading and another for when user clicks on browser back button. My problem is when user reloads that page, an unnecessary...
28 Dec 2022 by wiam leo
I want to show each group with your stagiaires But it doesn't show with this attempt import React from "react"; import Stagiaires from "./components/Stagiaires"; function App() { const stagiaire = [ { id: 1, title:...
28 Dec 2022 by Valery Possoz
Hi, The .map function is only available on array and your constant stagiaire is not an array and also the title values should be in quotes. You need to correct it like that: const stagiaire = [ { id: 1, title: "group1", ...
28 Dec 2022 by folza
We have an input field and a button with the value "Text". I just want to append the input field with the button's value by onClick. What I have tried: function Screen() { return ; } ...
24 Dec 2022 by Amogs
He guys, please I need some help with my NextJS/NodeJS project. I'm having the error: TypeError: Cannot read property '_id' of undefined at currentInstructor (C:\Users\Sammy\Desktop\eLearn\server\controllers\instructor.js:57:30 I can't...
24 Dec 2022 by Member 15874822
Just change User.findById(req.user._id) to User.findById(req.auth._id)
21 Dec 2022 by Chris Copeland
You should take a look at this monorepo pattern[^] approach. Essentially you can create a parent workspace, then create child applications beneath it (or import them as your case may be) and reference them from the parent project. Just bear in...
21 Dec 2022 by SNI
I have 2 independent web applications which needs to be shown in a single container application. I would like to know whether the way to use angular. What I have tried: Not yet tried as need to check whether this could be possible
20 Dec 2022 by 007 007
So, I'm able to create an account and to successfully get to the MyAccount page, see who's currently logged in to MyAccount page and log out of the MyAccount page (MyAccount.js). However, when I try to log in using an email + password by pressing...
20 Dec 2022 by Harsh Yadav Dec2022
const [sidebarData] = useState([ { name: t('menuItems.consignors'), link: CONSIGNORS_PATH }, userLevel === 3 || userLevel === 4 ? { name: t('menuItems.commission'), link: COMMISSION_PATH } : {}, userLevel !== 1 ? { name:...
7 Dec 2022 by 007 007
These are the errors I've been getting: WARNING in [eslint] src\Header.js Line 19:22: 'dispatch' is assigned a value but never used no-unused-vars src\LogIn.js Line 10:10: 'state' is assigned a value but never used no-unused-vars...
7 Dec 2022 by Graeme_Grant
Warnings are not errors, they are there to assist you. If you don't require those variables, then you can usually tell the linter to ignore them. Here is how from the eslint documentation: Ignoring Code - ESLint - Pluggable JavaScript Linter[^] ...
4 Dec 2022 by Liiban omar
Bit strange to get " access to fetch URL blocked by cors preflight etc..." because the PUT request works for me in postman but i only get that error when i try to upload in react js . Here is my code above. I get another error by the way " ...
4 Dec 2022 by Richard Deeming
Cross-Origin Resource Sharing (CORS)[^] only applies to requests initiated by the browser. It is intended to prevent a malicious site from instigating a request in the context of the current user. For example: you log in to your bank's website....
3 Dec 2022 by dan85
I am building a react jsx portfolio website. The site is almost finished and I am trying to include a theme switcher. I have tried everything I can think of and can't get the switcher to function properly. Everything else works fine. Whenever I...
1 Dec 2022 by Rilesh Patel
I am uploading images using react native. and my API is on php based. when i am testing my API using Post Man it works perfectly. but when I pass an image from react-native app. it show me an error like "[SyntaxError: JSON Parse error: Unexpected...