We Keep Coding

Getting an error message when I filter the redux state

I am getting an error when I try to filter the results of data I pulled from an API.
The error message comes when I use my searchBar component to filter the redux data immediately when I type anything.
Below is the error message:
"Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft."
What must I do to filter the data and return the new data?
Below are the components and the Redux TK slice I am using.
Home.js Component
import React, {useState, useEffect} from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import { getCountries } from '../redux/search';
// import LazyLoading from 'react-list-lazy-load';
// import { updateText } from '../redux/searchTerm';
import SearchBar from '../components/SearchBar';
import CardComponent from '../components/Card';
import DropdownMenu from '../components/DropdownMenu';
const Home = () => {
const dispatch = useDispatch();
// const [ countries, setCountries ] = useState(null);
const countries = useSelector((state) => state.search);
// const filterCountry = (searchCountry) => {
// countries.list.payload.filter(country => country.name.toLowerCase() == searchCountry.toLowerCase())
// }
useEffect(() => {
dispatch(getCountries());
console.log(countries);
}, [dispatch]);
// console.log(countries.filter(country => country.region.toLowerCase() === 'africa'))
return (
<>
<Container className="home-container">
<Row>
<Col sm={12} md={6} className="left">
<SearchBar />
</Col>
<Col sm={12} md={6} className="right">
<DropdownMenu/>
</Col>
</Row>
<Row className="countryRow">
{ countries.status == 'success'
?<>
{countries.list.map((country) => {
return <CardComponent key={country.name}
title={country.name}
image={country.flags[0]}
population={country.population}
region={country.region}
capital={country.capital}/>
})}
</>
:<div>Loading.....</div>
}
</Row>
</Container>
</>
)
}
export default Home;
SearchBar.js
import React from 'react';
import {useSelector, useDispatch} from 'react-redux';
// import { updateText } from '../redux/searchTerm';
import { searchTerm } from '../redux/search';
const SearchBar = () => {
const query = useSelector((state) => state.searchDefault);
const dispatch = useDispatch();
return (
<>
<form>
<input
className="search"
type="search"
placeholder="Search for a country"
value={query}
onChange={(e) => dispatch(searchTerm(e.target.value))}/>
</form>
</>
)
}
export default SearchBar;
search.js slice
import { createSlice, createAsyncThunk } from '#reduxjs/toolkit';
import axios from 'axios';
export const getCountries = createAsyncThunk(
'searchDefault/getCountries', async () => {
try {
const resp = await axios.get('https://restcountries.com/v2/all');
return await resp.data;
} catch (error) {
console.log(error.message);
}
}
)
const searchSlice = createSlice({
name: 'searchDefault',
initialState: {
list: [],
status: null,
value: ''
},
reducers: {
searchTerm: (state, action) => {
// console.log(state.value);
state.value = action.payload
// console.log(state.value);
state.list.filter( country => country.name == state.value);
return state.list;
// console.log(state.list);
}
},
extraReducers: {
[getCountries.pending]: (state, action) => {
state.status = 'loading'
},
[getCountries.fulfilled]: (state, payload) => {
console.log(payload)
state.list = payload.payload
state.status = 'success'
},
[getCountries.rejected]: (state, action) => {
state.status = 'failed'
}
}
})
export const { searchTerm } = searchSlice.actions;
export default searchSlice.reducer;

According to the docs from redux-toolkit:
Redux Toolkit's createReducer API uses Immer internally automatically. So, it's already safe to "mutate" state inside of any case reducer function that is passed to createReducer:
And Immer docs:
It is also allowed to return arbitrarily other data from the producer function. But only if you didn't modify the draft
In your reducer, you are using immer API to mutate the value (state.value = action.payload) and return the result. However Immer only allows you do one of the 2 things, not both. So either you mutate the state:
searchTerm: (state, action) => {
state.value = action.payload; // notify redux that only the value property is dirty
}
Or replace the new state completely:
searchTerm: (state, action) => {
return { ...state, value: action.payload }; // replace the whole state
// useful when you need to reset all state to the default value
}
Most of the time, you only need to tell redux that a specific property of the slice is changed, and redux will then notify only the components subscribed to that property (via useSelector) to re-render. So remove the return statement in your reducer and your code should be working again:
searchTerm: (state, action) => {
state.value = action.payload;
state.list = state.list.filter( country => country.name == state.value);
// remove the return statement
}

Reducer/Context Api

So I have a Context created with reducer. In reducer I have some logic, that in theory should work. I have Show Component that is iterating the data from data.js and has a button.I also have a windows Component that is iterating the data. Anyway the problem is that when I click on button in Show Component it should remove the item/id of data.js in Windows Component and in Show Component, but when I click on it nothing happens. I would be very grateful if someone could help me. Kind regards
App.js
const App =()=>{
const[isShowlOpen, setIsShowOpen]=React.useState(false)
const Show = useRef(null)
function openShow(){
setIsShowOpen(true)
}
function closeShowl(){
setIsShowOpen(false)
}
const handleShow =(e)=>{
if(show.current&& !showl.current.contains(e.target)){
closeShow()
}
}
useEffect(()=>{
document.addEventListener('click',handleShow)
return () =>{
document.removeEventListener('click', handleShow)
}
},[])
return (
<div>
<div ref={show}>
<img className='taskbar__iconsRight' onClick={() =>
setIsShowOpen(!isShowOpen)}
src="https://winaero.com/blog/wp-content/uploads/2017/07/Control-
-icon.png"/>
{isShowOpen ? <Show closeShow={closeShow} />: null}
</div>
)
}
```Context```
import React, { useState, useContext, useReducer, useEffect } from 'react'
import {windowsIcons} from './data'
import reducer from './reducer'
const AppContext = React.createContext()
const initialState = {
icons: windowsIcons
}
const AppProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState)
const remove = (id) => {
dispatch({ type: 'REMOVE', payload: id })
}
return (
<AppContext.Provider
value={{
...state,
remove,
}}
>
{children}
</AppContext.Provider>
)
}
export const useGlobalContext = () => {
return useContext(AppContext)
}
export { AppContext, AppProvider }
reducer.js
const reducer = (state, action) => {
if (action.type === 'REMOVE') {
return {
...state,
icons: state.icons.filter((windowsIcons) => windowsIcons.id !== action.payload),
}
}
}
export default reducer
``data.js```
export const windowsIcons =[
{
id:15,
url:"something/",
name:"yes",
img:"/images/icons/crud.png",
},
{
id:16,
url:"something/",
name:"nine",
img:"/images/icons/stermm.png",
},
{
id:17,
url:"domething/",
name:"ten",
img:"/images/icons/ll.png",
},
{
id:18,
url:"whatever",
name:"twenty",
img:"/images/icons/icons848.png",
},
{
id:19,
url:"hello",
name:"yeaa",
img:"/images/icons/icons8-96.png",
},
]
``` Show Component```
import React from 'react'
import { useGlobalContext } from '../../context'
import WindowsIcons from '../../WindowsIcons/WindowsIcons'
const Show = () => {
const { remove, } = useGlobalContext()
return (
<div className='control'>
{windowsIcons.map((unin)=>{
const { name, img, id} = unin
return (
<li className='control' key ={id}>
<div className='img__text'>
<img className='control__Img' src={img} />
<h4 className='control__name'>{name}</h4>
</div>
<button className='unin__button' onClick={() => remove(id)} >remove</button>
</li> )
</div>
)
}
export default Show
import React from 'react'
import {windowsIcons} from "../data"
import './WindowsIcons.css'
const WindowsIcons = ({id, url, img, name}) => {
return (
<>
{windowsIcons.map((icons)=>{
const {id, name , img ,url} =icons
return(
<div className='windows__icon' >
<li className='windows__list' key={id}>
<a href={url}>
<img className='windows__image' src={img}/>
<h4 className='windows__text'>{name}</h4>
</a>
</li>
</div>
)
})}
</>
)
}

Issue
In the reducer you are setting the initial state to your data list.
This is all correct.
However, then in your Show component you are directly importing windowsIcons and looping over it to render. So you are no longer looping over the state the reducer is handling. If the state changes, you won't see it.
Solution
In your Show component instead loop over the state that you have in the reducer:
const { remove, icons } = useGlobalContext()
{icons.map((unin) => {
// Render stuff
}
Now if you click remove it will modify the internal state and the icons variable will get updated.
Codesandbox working example

How to keep track of selected component?

I'm working on a coding challenge and I'm having problems to navigate back and forth between my components. Here's what a very simplified version of my parent component looks like:
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState({
shoppingBasket: true,
contactDetails: false,
paymentOptions: false,
checkout: false,
summary: false
});
const switchState = input => {
const { name, value } = input.target;
setComponent({
...component,
[name]: value
});
};
return (
<>
{
component.shoppingBasket &&
<ShoppingBasket
shoppingBasket={component.shoppingBasket}
switchState={switchState}
/>
}
{
component.contactDetails &&
<ContactDetails
contactDetails={component.contactDetails}
switchState={switchState}
/>
}
{
component.paymentOptions &&
<PaymentOptions
paymentOptions={component.paymentOptions}
switchState={switchState}
/>
}
{
component.checkout &&
<Checkout
checkout={component.checkout}
switchState={switchState}
/>
}
{
component.summary &&
<Summary
summary={component.summary}
switchState={switchState}
/>
}
</>
);
}
export default App;
It's supposed to be the checkout screen of an e-commerce page and it starts with the <ShoppingBasket /> component. When clicking "Continue", it shows the next component, when clicking "Back" it goes back to the previous one. They should appear in the order shown in the code.
My first attempt was to show the next component only when the previous one(s) evaluate true but at the end it was showing all of the components, so that didn't work. Note: I passed the switchState function and the respective state as prop to the child component.
I guess the smartest way is to show only the component that is currently selected but how do I do that? I assume working with IDs?
And would it be still necessary to keep track of the previous components evaluating to true, when it's only showing the selected one anyway?
SOLUTION:
Parent component (simplified but working):
import React, { useState } from 'react';
// COMPONENTS
import ShoppingBasket from './components/ShoppingBasket';
import PaymentOptions from './components/PaymentOptions';
import ContactDetails from './components/ContactDetails';
import Checkout from './components/Checkout';
import Summary from './components/Summary';
export default function App() {
const [component, setComponent] = useState(0);
const switchComponent = (index) => {
setComponent(index);
};
return (
<>
{
{
0: <ShoppingBasket switchComponent={switchComponent} />,
1: <ContactDetails switchComponent={switchComponent} />,
2: <PaymentOptions switchComponent={switchComponent} />,
3: <Checkout switchComponent={switchComponent} />,
4: <Summary />,
}[component]
}
</>
);
}
Child component with index 3 (also simplified):
import React from 'react';
export default function Checkout({ switchComponent }) {
return (
<>
<button onClick={() => switchComponent(2)}>BACK</button>
<button onClick={() => switchComponent(4)}>CONTINUE</button>
</>
);
}

Update:
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState(0);
const switchComponent = index => {
setComponent(index);
};
return (
<>
{
// this act like switch case js function
{
0:
(<ShoppingBasket
//shoppingBasket={component.shoppingBasket} // no need for this
componentIndex={component}
switchState={switchComponent}
/>),
1:
(<ContactDetails
// contactDetails={component.contactDetails}
componentIndex={component}
switchState={switchComponent}
/>),
2:
(<PaymentOptions
// paymentOptions={component.paymentOptions}
componentIndex={component}
switchState={switchComponent}
/>),
3:
(<Checkout
// checkout={component.checkout}
componentIndex={component}
switchState={switchComponent}
/>),
4:
(<Summary
// summary={component.summary}
componentIndex={component}
switchState={switchComponent}
/>)
}[component]
}
</>
);
}
export default App;

ShoppingBasket.js
const ShoppingBasket = props => {
return (
// your ShoppingBasket component .....
)
}
** ContactDetails.js**
const ContactDetails = props => {
return (
// your ContactDetails component .....
)
}
....... the same for other components
App.js
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState(0);
const switchComponent = index => {
setComponent(index);
};
return (
<>
{
// this act like switch case js function
//
{
0:
(<ShoppingBasket/>),
1:
(<ContactDetails/>),
2:
(<PaymentOptions/>),
3:
(<Checkout/>),
4:
(<Summary/>)
}[component]
}
// navigation buttons .... always visible
<NavigateButtons
componentIndex={component}
switchState={switchComponent}
/>
</>
);
}
export default App;
----------------------------------***----------------
Note : make sure the buttons next and previous are just one splited component so you can use it in diffrent other components
const NavigateButtons = (props) => (
<div>
<Button
disabled={componentIndex == 4}
onClick={()=> props.switchState(componentIndex + 1)}>next
</Button>
<Button
disabled={componentIndex == 0}
onClick={()=> props.switchState(componentIndex - 1)}>previous
</Button>
</div>
)

Maximum update depth exceeded when trying to pass mapped json data to state

TLDR: How to pass already mapped json array back to a state. I want Likes to be within a state.
and called like this for example
<Like like={id} likes={this.state.likes} />
not like this
<Like like={id} likes={Likes.length} />
I would be needing to add a counter to upvote the count on click which is why this needs to be dynamic to upvote count.
here is a visual representation of the array.
Im doing this to fetch it within PostList.js
{this.getLikes(post.Likes)}
Within the function im doing this
getLikes = (count) => {
const myLikes = count.forEach( (like) => like.length);
this.setState({
likes: myLikes
})
}
the state likes will be passed in a prop called myLikes to the postItem component.
myLikes={this.state.likes}
Within PostItem.js
it will be referenced like this
<Like like={id} likes={myLikes} />
however getting this error.
Maximum update depth exceeded. This can happen when a component
repeatedly calls setState inside componentWillUpdate or
componentDidUpdate. React limits the number of nested updates to
prevent infinite loops.
Here is the detailed code
PostList.js
import React, { Component } from 'react';
import Paper from '#material-ui/core/Paper';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import moment from 'moment';
import {connect} from 'react-redux';
import PostItem from './PostItem';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
}
}
class PostList extends Component{
constructor(props){
super(props);
this.state ={
title: '',
likes:[]
}
}
getLikes = (count) => {
const myLikes = count.forEach( (like) => like.length);
this.setState({
likes: myLikes
})
}
render(){
const {posts} = this.props;
return (
<div>
{posts.map((post, i) => (
<Paper key={post.id} style={Styles.myPaper}>
{this.getLikes(post.Likes)}
{/* {...post} prevents us from writing all of the properties out */}
<PostItem
myLikes={this.state.likes}
myTitle={this.state.title}
editChange={this.onChange}
editForm={this.formEditing}
isEditing={this.props.isEditingId === post.id}
removePost={this.removePost}
{...post}
/>
</Paper>
))}
</div>
)
}
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
});
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
PostItem.js
import React, { Component } from 'react';
import Paper from '#material-ui/core/Paper';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import moment from 'moment';
import Editable from './Editable';
import {connect} from 'react-redux';
import {UpdatePost, postLike, getCount} from '../actions/';
import Like from './Like';
import Axios from '../Axios';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
},
button:{
marginRight:'30px'
}
}
class PostItem extends Component{
constructor(props){
super(props);
this.state = {
disabled: false,
myId: 0,
likes:0
}
}
componentWillMount(){
}
onUpdate = (id, title) => () => {
// we need the id so expres knows what post to update, and the title being that only editing the title.
if(this.props.myTitle !== null){
const creds = {
id, title
}
this.props.UpdatePost(creds);
}
}
render(){
const {title, id, userId, removePost, createdAt, post_content, username, editForm, isEditing, editChange, myTitle, postUpdate, Likes, clickLike, myLikes} = this.props
return(
<div>
<Typography variant="h6" component="h3">
{/* if else teneray operator */}
{isEditing ? (
<Editable editField={myTitle ? myTitle : title} editChange={editChange}/>
): (
<div>
{title}
</div>
)}
</Typography>
<Typography component={'span'} variant={'body2'}>
{post_content}
<h5>by: {username} </h5>
{/* component span cancels out the cant be a decedent of error */}
<Typography component={'span'} variant={'body2'} color="textSecondary">{moment(createdAt).calendar()}</Typography>
{/* gets like counts */}
<Like like={id} likes={myLikes} />
</Typography>
{!isEditing ? (
<Button variant="outlined" type="submit" onClick={editForm(id)}>
Edit
</Button>
):(
// pass id, and myTitle which as we remember myTitle is the new value when updating the title
<div>
<Button
disabled={myTitle.length <= 3}
variant="outlined"
onClick={this.onUpdate(id, myTitle)}>
Update
</Button>
<Button
variant="outlined"
style={{marginLeft: '0.7%'}}
onClick={editForm(null)}>
Close
</Button>
</div>
)}
{!isEditing && (
<Button
style={{marginLeft: '0.7%'}}
variant="outlined"
color="primary"
type="submit"
onClick={removePost(id)}>
Remove
</Button>
)}
</div>
)
}
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
});
export default connect(mapStateToProps, mapDispatchToProps)(PostItem);
Also some more info
Posts.js
import React, { Component } from 'react';
import PostList from './PostList';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {GetPosts} from '../actions/';
const Styles = {
myPaper:{
margin: '20px 0px',
padding:'20px'
}
,
wrapper:{
padding:'0px 60px'
}
}
class Posts extends Component {
state = {
posts: [],
loading: true,
isEditing: false,
}
async componentWillMount(){
await this.props.GetPosts();
const thesePosts = await this.props.myPosts
const myPosts2 = await thesePosts
this.setState({
posts: myPosts2,
loading:false
})
}
render() {
const {loading} = this.state;
const { myPosts} = this.props
if (!this.props.isAuthenticated) {
return (<Redirect to='/signIn' />);
}
if(loading){
return "loading..."
}
return (
<div className="App" style={Styles.wrapper}>
<h1> Posts </h1>
<PostList posts={this.state.posts}/>
</div>
);
}
}
const mapStateToProps = (state) => ({
isAuthenticated: state.user.isAuthenticated,
myPosts: state.post.posts
})
const mapDispatchToProps = (dispatch, state) => ({
GetPosts: () => dispatch( GetPosts())
});
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Posts));

My reducer does not seem to modify the state in the store to allow my React view to render again

To begin, I should mention that I have followed this pattern I'm about to show you with two other sets of React components in my project.
For some reason it seems to not work and I have focused in on that either the #connect or the reducer is the problem. I've had several people look over this and I've attempted several different methods to solve this problem.
import classNames from 'classnames';
import SidebarMixin from 'global/jsx/sidebar_component';
import Header from 'common/header';
import Sidebar from 'common/sidebar';
import Footer from 'common/footer';
import AppList from '../components/lists';
import { connect } from 'react-redux'
import actions from 'redux/actions';
import { VisibilityFilters } from 'redux/actions/actionTypes';
#connect((state) => state)
class AppContainer extends React.Component {
constructor(props) {
super(props)
}
componentWillMount() {
this.props.dispatch(actions.getUnconsidered(1));
this.props.dispatch(actions.getConsidered(3));
this.props.dispatch(actions.getInterviews(4));
this.props.dispatch(actions.getOffers(2));
}
This right here is dispatching four actions to fetch data for the application. We are using Redux Thunk middleware to deal with the async problems associated with making these Ajax requests.
I have found that the data from all of these Ajax calls is reaching the reducer.
render() {
console.log("AppContainer state", this.props);
This console.log should log twice... once empty during the first render and again when the state changes after the reducers which should show the state with my data mapped to the props because of the #connect.
I'm fairly certain of this because of my other views that I've done.
return (
<div>
<Container id='body'>
<Grid>
<Row>
<Col md={3}>
<AppList data={this.props.unconsidered}/>
</Col>
<Col md={3}>
<AppList data={this.props.considered} />
</Col>
<Col md={3}>
<AppList data={this.props.interviews} />
</Col>
<Col md={3}>
<AppList data={this.props.offers} />
</Col>
</Row>
</Grid>
</Container>
</div>
)
}
}
#SidebarMixin
export default class extends React.Component {
render() {
const dispatch = this.props.dispatch
var classes = classNames({
'container-open': this.props.open
})
return (
<Container id='container' className={classes}>
<Sidebar />
<Header />
<AppContainer />
<Footer />
</Container>
)}
}
This next code block is my action creator file.
import axios from 'axios';
import {GET_UNCONSIDERED,
GET_CONSIDERED,
GET_INTERVIEWS,
GET_OFFERS } from './actionTypes';
function getUnconsidered(jobID){
console.log('getUnconsidered Actions')
return dispatch => axios.get('/user/employer/appsbystatus?jobID='+jobID+'&status=unconsidered')
.then(
payload => dispatch({ type: GET_UNCONSIDERED, payload})
)
.catch(resp => console.log("Error fetching unconsidered", resp));
}
function getConsidered(jobID){
return dispatch => axios.get('/user/employer/appsbystatus?jobID='+jobID+'&status=considered')
.then(
payload => dispatch({ type: GET_CONSIDERED, payload})
);
}
function getInterviews(jobID){
return dispatch => axios.get('/user/employer/appsbystatus?jobID='+jobID+'&status=interviews')
.then(
payload => dispatch({ type: GET_INTERVIEWS, payload})
);
}
function getOffers(jobID){
return dispatch => axios.get('/user/employer/appsbystatus?jobID='+jobID+'&status=offers')
.then(
payload => dispatch({ type: GET_OFFERS, payload})
);
}
module.exports = {
getUnconsidered: getUnconsidered,
getConsidered: getConsidered,
getInterviews: getInterviews,
getOffers: getOffers
}
This here is my reducer file and where I believe my problem lies.
import {GET_UNCONSIDERED,
GET_CONSIDERED,
GET_INTERVIEWS,
GET_OFFERS } from '../actions/actionTypes';
function empdashboard(state = {}, action) {
console.log("state in dashboard reducer = ", state);
switch (action.type) {
case GET_UNCONSIDERED:
console.log("unconsidered:", action.payload)
const unconsidered = action.payload.data;
return Object.assign({}, state, {
unconsidered: unconsidered
});
case GET_CONSIDERED:
console.log("considered:", action.payload)
const considered = action.payload.data;
return Object.assign({}, state, {
considered: considered
});
case GET_INTERVIEWS:
console.log("interviews:", action.payload)
const interviews = action.payload.data;
return Object.assign({}, state, {
interviews: interviews
});
case GET_OFFERS:
console.log("offers:", action.payload)
const offers = action.payload.data;
return Object.assign({}, state, {
offers: offers
});
default:
return state;
}
}
module.exports = {
empdashboard: empdashboard
}
Honestly I'm under the impression that either my reducer is messed up or I'm having a bug with my #connect and it is not detecting the change in state to rerender my view.
Thanks for taking a look at this!