Reaching Nested State data w/ Reducer using immer - reactjs

Question

I got data.js that contains name, listOfReview that have sub nested state(name, occupation and etc). i'm using useReducer to add another review on the listofreview. but the problem is after posting a review it will create a new object outside the listofreview. The output
data.js
export const data = [
{
id: 1607089645363,
name: 'john',
noOfReview: 1,
listOfReview: [
{
reviewId: 1607089645361,
name: 'john doe',
occupation: 'hero',
rating: 5,
review: 'lorem ipsum',
}
]
},
];
index.js
import { data } from '../../src/data';
import { reducer } from './reducer';
const defaultState = {
review: data
}
const ModalHandler = props => {
const [rating, setRating] = useState(null);
const [name, setName] = useState('');
const [occupation, setOccupation] = useState('');
const [reviews, setReviews] = useState('');
const [state, dispatch] = useReducer(reducer, defaultState);
const handelSubmit = (e) => {
e.preventDefault();
if (name && occupation && reviews) {
const newReview = { Reviewid: new Date().getTime().toString(), rating, name, occupation, reviews };
dispatch({ type: 'ADD_REVIEW_ITEM', payload: newReview });
}
}
}
reducer.js
export const reducer = (state, action) => {
switch (action.type) {
case "ADD_REVIEW_ITEM":
return state.map((data) => {
if (data) {
const newReview = [...data.listOfReview, action.payload];
return {
...data,
listOfReview: newReview
};
}
return data;
});
default:
return state;
}
};
OUTPUT

Answer 1

According to your data structure, you have an array of listOfReview in an array of data:-
These 2 fixes may help you:-
FIXES 1: You need to pass the selected id of data you want to add new review to
FIXES 2: You need to change the way you code your reducer so that it will update the state correctly and not mutating the current state
Fixes 1
index.js. Adjust your handleSubmit to receive arg of selected id of data you want to add *new review obj. Thus, send both 'selectedDataId' and newReview via dispatch payload
import { data } from '../../src/data';
import { reducer } from './reducer';
const ModalHandler = props => {
const [rating, setRating] = useState(null);
const [name, setName] = useState('');
const [occupation, setOccupation] = useState('');
const [reviews, setReviews] = useState('');
const [state, dispatch] = useReducer(reducer, defaultState);
const handelSubmit = (e, selectedDataId) => {
e.preventDefault();
if (name && occupation && reviews) {
const newReview = { Reviewid: new Date().getTime().toString(), rating, name, occupation, reviews };
dispatch({
type: 'ADD_REVIEW_ITEM',
payload: {
selectedDataId: selectedDataId,
newReview: newReview
}
});
}
}
}
Fixes 2
in reducer. Adjust so that it will not mutate your current state
const reducer = (state, action) => {
switch (action.type) {
case "ADD_REVIEW_ITEM":
return {
...state,
review: state.review.map((data) => {
if (data.id === action.payload.selectedDataId) {
return {
...data,
listOfReview: [...data.listOfReview, action.payload.newReview]
};
}
return data;
})
};
default:
return state;
}
};
This a working sandbox of your case.