I'm having an issue with my quiz page where the previous button is not functioning properly. The user should be able to change their answer before submitting, but after 5-6 clicks on the previous button, they are redirected to the next page without compl ...
I am facing an issue where the app is not rendering despite successful compilation with yarn run. Here is the code snippet: import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import {Provider} from 'react-redux'; import { ...
My functional component accepts a function called addEvent, which expects an event parameter. The problem arises when I try to call this function from props within another functional component, as the function does not seem to execute: const onOk = () =&g ...
Is there a way to customize the Material UI auto complete feature so that it only displays the autocomplete list when a specific key, such as "@" is typed? ...
I recently made some updates to my ecommerce store, including adding login and register options. To ensure that user tokens are saved even after a page refresh, I decided to implement redux-persist. However, I encountered an issue where the design breaks a ...
Attempting to mark a location using Mapbox GL, I've installed react-map-gl and encountered the following error: Unhandled Rejection (TypeError): zone.filter is not a function. Can someone please assist me in resolving this issue? What am I doing incorrec ...
After implementing include functionality for foreign keys in my backend API controller, the values are now being fetched into my Redux store, where I intend to use them. However, I am facing challenges in accessing these values when attempting to map them ...
Should I avoid mixing React hooks and mapStateToProps in my application and instead use Redux hooks like useSelector? In my React app, I have an array of 'friend' data stored in Redux. Using useEffect in one of my components, I am saving this da ...
I am facing an issue with setting the state of a child component using props, and I'm also puzzled by why the BarChart component is rendering multiple times in this scenario. What would be considered a better practice: obtaining all store values in the pa ...
I am currently working on obtaining the type of my redux store to define the RootState type. Previously, I was just creating and exporting a store instance following the instructions in the redux toolkit documentation without encountering any issues. Howev ...
Currently, I am in the process of refactoring a class component into a functional component. One particular issue I am facing is whether to use an action creator inside useEffect() instead of componentDidMount(). My linter is flagging that I'm not passing ...
import { useState } from 'react'; import About from './Container/About'; import Profile from './Container/Profile'; import {BrowserRouter as Router,Route} from 'react-router-dom' function App() { const [state, set ...
My goal is to display a tooltip when the mouse enters an item, and hide it when the mouse leaves. I created a demo that works perfectly fine. Check out the working demo here The above code successfully shows the tooltip on hover and hides it on leave. I ...
function mapStateToProps(state) { return { model: Selectors.Quotes.getCurrentQuote(state), }; } class Customer extends Component { state = { checkedEnergyConcessionHolder: false }; ...
I have multiple paths that share the same controller: <Route component={Search} path='/accommodation(/:state)(/:region)(/:area)' /> and when the route changes, I trigger the api function within the component: componentWillReceiveProps = ...
I'm having trouble accessing props from Redux connect() in my nested route. I can't seem to make it work. Here are the components involved: Main.js const initState = {}; const history = createBrowserHistory(); const store = configureStore(initState, his ...
I am currently working on a simple form in react-redux with the goal of adding a user to the database and displaying a success message upon successful registration. However, I am unsure of the most effective approach to achieve this. Here is what I have so ...
How can I ensure my reducer updates when the API sends a response with an updated token? I attempted to dispatch an action from middleware, but unfortunately the reducer keeps getting reset to its initial state. ...
I recently created a git repository that I've been using to practice ReactJS and delve into learning about redux-thunk. While it started off relatively easy, I've hit a roadblock in understanding how it works with routes. During my investigation ...
There is an action that needs to be handled. It involves saving a new task with its name and description through an API call. export const saveNewTask = (taskName, taskDescription) => async dispatch => { console.log(taskName, taskDescription); c ...
I have received a json file named data.json which contains multiple objects in an array. My goal is to extract the value of a specific key from each object. To achieve this, I am utilizing react redux to fetch these values and present them in a table forma ...
Hey there, I'm experimenting with changing colors by passing either 'primary' or 'secondary', but I'm not sure how to do it. // @flow import * as React from 'react'; import withStyles from '@material-ui/core/styles/withStyles'; import type { Theme } from ...
I have read through several posts on this forum related to similar issues, but unfortunately, I haven't had any success yet. Here is an example of the code snippet I am using, taken directly from the redux-thunk npm readme file: const INCREMENT_COUNTER = ...
Working on fetching data for GameChart from an API and updating the Redux state. In my GameChart.jsx file, I have a chart that gets rendered when componentDidUpdate is called. However, there are times when changing the Redux state does not trigger componen ...
My task is to retrieve data for SSR and send that data from the Client. const MyPage = ({ myFetch1, myFetch2, myFetch3, }) => { const dispatch = useDispatch(); dispatch(doSomething1(myFetch1)); dispatch(doSomething2(myFetch2)); dispatch(do ...
I have been utilizing redux-persist and must say, it's been quite beneficial. However, I've encountered an issue when attempting to solely use it during development - for some reason, it doesn't appear to be functioning correctly. Can anyone pinpoint the ...
I recently built a website using gatsby.js and incorporated bounce.js to animate some images on the page. Bounce.js is a JavaScript library that offers DOM animation functionalities. Although everything appears fine when I view the site locally, once I de ...
My unique custom component utilizes an SFC that resembles: export const InputField = field => ( <div> <TextField required={field.required} invalid={field.meta.touched && !!field.meta.error} label={field.label} {...field.inpu ...
As a newcomer to a React & ASP.NET project, I am facing a challenge in displaying upload status notifications. The task may seem simple, but I need help in figuring out how to create popup notifications that indicate which files have been successfully uplo ...
After successfully adding Redux for state management in my project, everything was working fine until I introduced reducers and middleware to fetch data. The problem arose when I started running the app and using dispatch (not necessarily on new actions), ...
After joining a new company, I discovered numerous outdated project dependencies such as [email protected], react-native-firebase, and react-native. My goal now is to update all of them, but the challenge lies in the fact that four other developers ar ...
Implementing a modal form with an ajax request using react, redux, and react-redux has been my current project. In my understanding, react-redux allows you to : display data from the redux store in your component dispatch an event from the container to ...
I have been looking for a solution to my issue but couldn't find anything that matches it. I am working on creating a calculator app using React & Redux, and whenever I click on one of the number buttons, I receive an error message saying "this.props. ...
I have been utilizing the connect function in React Redux to link my store to a React component. Once connected, I aim to render the component successfully. The initial setup appears like this: class Init extends React.Component { render() { return ...
I am looking to change the color of the asterisk in my form fields from black to red. I am currently using the Material UI React library and need some guidance on how to achieve this. You can view the code here: https://codesandbox.io/s/r7lq1jnjl4 For mo ...
I'm attempting to set up a player using a POST request but I keep encountering the error of promise rejected in redux devtool. Interestingly, the data is visible on the UI. The tools being utilized are createAsyncThunk and createEntityAdapter: creat ...
I am currently developing an input feature where I need to insert a comma after every 3 numbers, such as (352,353,353). The challenge is to display this format in a text field. Since I am new to working with React, I would appreciate any guidance on how to ...
For a while now, I've been grappling with an issue that seems to be unique to me. The problem lies within my component and container setup for the start screen rendering at the initial route. components/DifficultySelection.jsx import React from 'react'; ...
Encountering an issue while transitioning my state to redux Error: sourceSelector is not a function I've shared the code from the component and the action being dispatched; I suspect it's related to mapDispatchToProps but unsure Component: ...
Would it be secure to utilize useCnntext+useReducer for storing JWT tokens? Additionally, how does this differ from using Redux? ...
It seems like I'm overlooking something when trying to call a reducer function from redux using mapDispatchToProps, but the missing step eludes me. This is the code for the reducer: case "CHANGE_COMPLETED": return (state = { ...state, ...
When attempting to utilize the new useSelector hook (shown in the example below) from react-redux in TypeScript, an error is encountered indicating that the function does not exist: Module '"../../../node_modules/@types/react-redux"' has no exported membe ...
I am currently working on creating a login form that makes an API call to retrieve a token. As someone new to react and redux, I followed the steps outlined in this tutorial to achieve this. The login form utilizes redux-form. Below is the code snippet f ...
I have created a simplistic Single Page Application (SPA) using the thunk library. This application utilizes the GitHub API to fetch a list of repositories. Initially, I had implemented an example with a class-based presentational component that included l ...
For the past day, I've been working on resolving a bug that has been plaguing me. Everything was functioning perfectly before the update action. I made sure to log all the states before executing the update action. However, after creating a model, t ...
I am trying to rewrite the life cycle methods in hooks but I am facing some issues. It seems like the component is not behaving as expected. How can I correct this? Can you provide guidance on how to properly rewrite it? useEffect(() => { updateUs ...
I encountered an issue with my reducer, how can I incorporate the id in both switch cases? case "SUBMIT_ANSWER": const { current, results, completed, id } = action.data; return state.map(video => video.id === id ? { ...v ...
I am attempting to create a new function in order to update a specific property within an object. Unfortunately, I am encountering difficulties when it comes to storing and updating the new state information. Reducer export default function replaceCardN ...
My server contains the following code snippet: <ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider> The <Layout> component includes more nested components. Further dow ...
Currently, I am in the process of developing my own eCommerce platform using React. One crucial component of this project is the ProductList.js, which manages the display of various products through the code written in Product.js. To facilitate data manage ...
I've been struggling to display multiple warnings using Snackbar from the Material UI library in my React project. I haven't found any examples with React, only Vue. Can anyone help me with this? Here is the code that I have tried so far: https: ...
Using this code allows me to generate QR Codes, but I am struggling with saving the generated QR Code in PNG or JPEG format. I have tried a few examples without success and I am continuing to try different methods. import React, { Component } from 'react' ...
Currently, I am dealing with a situation where I have an array of items coming from the backend in my app. To manage the state, I am utilizing redux. The UI consists of a dropdown menu and a search text field. When a user selects an item from the dropdown, ...
When it comes to selecting just one checkbox and ensuring that only one can be checked at a time, the focus is on handling the behavior in React Redux using actions and reducers. How can this functionality be implemented effectively? data:[ {id:1, name:a ...
I seem to be facing an unusual issue with the <input onChange={this.handleArticleId} value={this.props.articleIdValue} placeholder="article id"/> field. Whenever I try typing something, the letter only appears in the input box after clicking on the s ...
Does React still require the use of zilverline's tap event plugin or has it been integrated directly into React's source code, eliminating the need for a tap delay? ...
I am new to using react and encountering an issue with my ecommerce app. The app runs smoothly until I log out and then log back in at the shipping address page, which triggers the following error: TypeError: Cannot read property 'address' of nu ...
Currently, I am utilizing react-redux for state management and axios to handle API requests. Here is my initial state setup: const defaultState = { isLoading: true, isAuthenticated: false, authUser: {} } After a successful login API call, bot ...
Presented here is an array: var CountryList = [{ name: Canada, value: 1 }, { name: USA, value: 2 }] The current operation being utilized is: var filterStr = nextProps.Country.value == "1" ? 'Canada' : 'USA'; Now the objective is ...
Excuse my lack of experience, but I am currently delving into the world of react-redux and trying to grasp the concepts as I progress. Situation: In my main component within a react-redux application, I have the following snippet at the end: function map ...
I am utilizing redux to manage the data within a React application. Each block of data is displayed within its own DIV element. My goal is to have each div separated by space and transformed into an accordion card. I am seeking guidance on the best appro ...
I recently started working on a new react-redux app, and as a beginner in React, I decided to incorporate Material-UI tabs into my project. The goal was to have the URL change when users select a tab, which I managed to achieve with the code snippet below: ...
I received a warning message for a page that I am not currently visiting (I'm on the https://example.com/this-page). Warning: Failed prop type: The prop `query` is marked as required in `OtherPage`, but its value is `undefined`. "prop-types": & ...
I am currently facing an issue with my component and reducer. The `componentDidMount()` method in my component is calling a server to get some data, but the component doesn't re-render after the action is performed. I have checked my code multiple times, b ...
Struggling with the distinction between components and containers when using Bootstrap's modal in React-Redux. Instead of repetitively creating modals, I aim to develop a React Component that encompasses a modal template. For clarification, here's a proj ...
Is there anyone who can assist me in integrating StackNavigator and Redux? It seems straightforward, but I'm encountering issues. index.ios.js import React from 'react' import { AppRegistry } from 'react-native' import { Provider } from 'react-redux' ...
I am encountering an issue where, upon switching routes, the value of a property in my store is reverting back to its original state. This occurs while using react 16 with react router v4. Additionally, I have observed that the entire App component re-ren ...
I'm currently facing a minor issue while using createAsyncAction from the library typesafe-actions (Typesafe Actions) and correctly typing them for my reducer function Below is an example of the action being created: export const login = createAsync ...
I am looking to incorporate a terminal into my React-Electron application that allows me to execute all the commands available in bash. Whether it's running 'npm install' or any other command, I want the embedded terminal to be able to handle them all. A ...
As I attempt to navigate between screens using BottomNavigationAction from Material UI, I encounter the error message You should not use <Link> outside a <Router> Here is my Tab.js: import React from 'react'; import { Link } from 'react-route ...
I've been working on a login page using React Native, Redux, and Thunk as middleware. I've encountered several issues related to fetching values from my actions when certain events occur. The login page makes a call to a NodeJS server. Upon click ...
I have been working with the mini variant drawer component from the official material-ui website and I am encountering some issues when trying to convert it into a class component. The errors seem to be related to hooks and are occurring within the node ...
While developing a redux reducer that manages user login and logout, I encountered an issue with the logout functionality. The login process is functioning properly, but upon attempting to logout, I received the following error: loginReducer.js:60 Uncaught ...
I am currently facing an issue where I am trying to make a post request using axios, to send a form to the backend. However, when I use the post request, nothing is being sent. I am utilizing redux-form to capture the form data and axios to send it to a Fl ...
Good evening everyone, I've encountered an error with one of my components. The error message reads: Cannot update a component (GameBase) while rendering a different component (ExistingGame). To locate the bad setState() call inside... I'm not exactly s ...