News Articles react-redux

An undefined object created when running React-Redux project

I am struggling with a React exercise which uses Redux. When I create a new object, there is always an undefined object created (as you can see in the figure). However, I can not see anything strange on db.json file or when I go to the address of JSON server. The object can be added […]

How do I use fetched API data in another component as described below?

I am fetching company logos using react redux in a one component from [clearbit][1], and slicing to display 4 logos like this Results.slice(0, 4).map((item) => ( <Logo /> in a different component. Now I want to create focus on the first logo to the right and navigate using left/right keys. This is what I have […]

An undefined object created when I create an object by using axios in the React-redux project

I am struggling with a React exercise which uses Redux. When I create a new object, there is always an undefined object created. However, I can not see anything strange on db.json file or when I go to the address of JSON server. After that when I reload the page, all of the warnings disappear. […]

when i filter the cart the reducer function return proxy only in redux toolkit

I have tried to remove the product from the cart. here the cart is an array that contains products in the object. when I try to filter the cart in reducer it returns proxy and cannot do filtering while in same thing doing in normal redux do filtering. reducer function const initialState = { products: […]

React redux-persist my store only saves element on refresh

I’m pretty new to Redux. What I am trying to do is to save an object in the Redux store, and I want it to be saved even on refresh. That’s why I am using redux-persist. I dispatch the value in one component, and then I push another route. However when I try to read […]

How do I set a variable to value using React-Redux on the initial page load?

I am creating a language switcher for my application. So far, I can support 4 languages (English [en], Spanish [sp], French [fr], and Arabic [ar]). I have already converted all of the language properties files to JSON and I can import those files into my .jsx file. However, when it comes to setting the language, […]

functional components with redux, search textbox

I have a react application and a search functionality. But now I try to implement redux within the application. So I don’t want to have this anymore: //const [searchfield, stateSearchField] = useState(”); But if I load the app I get now this errors: ReferenceError: searchfield is not defined (anonymous function) E:/Mijn Documents/UDEMY/REACT/robofriends-master/src/containers/App.js:41 38 | 39 […]

How can I update the data in my list if a subitem updates from a get request in RTK Query

So I have the general concept of RTK query down fairly well but I have a use case where I need some assistance. I have a list component and a details component that you can navigate to to view more details on that list item. So I have two endpoints getList and getDetails. My question […]

How to have json data dynamically in javascript variable?

I have the following reactjs code – const [interviewerDetails,setinterviewerDetails] =useState([]); useEffect(()=>{ const getinterviewerDetails= async ()=>{ const data1 = await axios.get("http://localhost:8083/api/GetProduct") .then(response => { console.log("role is "+response.data[0].role) setinterviewerDetails(response.data) console.log(interviewerDetails) }) .catch(error => { console.log(error) }) setinterviewerDetails(data1); }; getinterviewerDetails(); },[]) console.log("interviewerDetails : ", interviewerDetails) Which is giving the following response in console – Now, I want to […]

In react, export variable is always returning false even though we are setting the state to true in UseEffect Hook

Login.jsx import * as React from ‘react’; import Avatar from ‘@mui/material/Avatar’; import Button from ‘@mui/material/Button’; import CssBaseline from ‘@mui/material/CssBaseline’; import TextField from ‘@mui/material/TextField’; import FormControlLabel from ‘@mui/material/FormControlLabel’; import Checkbox from ‘@mui/material/Checkbox’; import Link from ‘@mui/material/Link’; import Paper from ‘@mui/material/Paper’; import Box from ‘@mui/material/Box’; import Grid from ‘@mui/material/Grid’; import LockOutlinedIcon from ‘@mui/icons-material/LockOutlined’; import Typography from ‘@mui/material/Typography’; […]

Slider in Reactjs

Hello Everyone hope you all are doing good, I’m converting the Html webpage into Reactjs everything was going good but only the below code is not working in react can anyone please help. <section className="mainslider" id="mainslider"> <div id="rev_slider_wrapper" className="rev_slider_wrapper fullwidthbanner-container" data-alias="product" style={{ margin: "0px auto", backgroundColor: "transparent", padding: "0px", marginTop: "0px", marginBottom: "0px" }}> <div […]

Got this error: [ TypeError: Cannot read properties of undefined (reading ‘map’) ], Please help to resolve?

I’m building a react project using redux. I’m getting this weird error, i’m not able to resolve: The error I see in my browser window: Contacts.render C:/Users/lenovo/Desktop/contactmanager_redux/src/components/contacts/Contacts.js:18 15 | const { contacts } = this.props; 16 | return ( 17 | <React.Fragment> > 18 | <h1 className="display-4 mb-2"> | ^ 19 | <span className="text-success">Contact</span> List […]

React-redux TS Property ‘postFetchData’ does not exist on type ‘Readonly<{}> & Readonly<{ children?: ReactNode; }>’ I want to get data from the api

I want to get data from the api, but I don’t understand how to solve this problem The error comes out exactly at postFetchData List item App.tsx import React, { Component } from ‘react’ import { connect } from ‘react-redux’ import a from ‘./App.module.css’ import { postFetchData } from ‘./actions/action’ class App extends Component { […]

How to change life cycle function to functional component in React

I tried to change from a class component to a functional component, but it didn’t work. What’s the problem? Class Component import React from ‘react’; import PropTypes from ‘prop-types’; const { Provider, Consumer } = React.createContext({}); class FormProvider extends React.PureComponent { static Consumer = Consumer; static getDerivedStateFromProps({ initValues }, prevState) { const values = initValues […]

React useEffect is not triggering on redirect

i have a function called login that redirects the user to the main page if everything was ok. Then, on the main page, i want to fetch some user info with useEffect using the token the was stored when the user logged in, but nothing happens. Only when i refresh the page i get the […]

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading ‘get’)

I am trying to implement PayPal Button on my site, but somehow something is going wrong. I have checked my code over and over. Also researched other potential solutions, but can’t get it to work. When I do a get request in Postman I get a nice response. The error it trows is: Uncaught (in […]

how to make useEffect without initial render

I just started learning javascript and react-redux, and I’m using useEffect to call POST method. So, I am wondering how to make it not send request to my backend whenever I open or refresh website my HTTP Post looks like: export const sendItemData = (items) => { return async () => { const sendRequest = […]

Redux-Form clears existing form properties from state after change of route

I have React application in which I am using Redux to manage application state. There are mutltiple reducers which is custom created and I have forms too in my application. To maintain form state I have used redux-form library and its working fine but whenever I submit the form and move to next route, the […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.