Update child component when parent state is updated - reactjs

Question

When there is a new update in my parent component, which occur within the function updateItemValue() , the items state will only get updated in parent. The child component won't get updated in an instance. It only get updated when the updateItemValue() get triggered twice.
It's something like:
1st round, parent update the items, child didn't receive the update.
2nd round, parent update the items, child only receive the update from 1st round
Parent Component
const SelectItem = () => {
const { items } = useSelector(state => state.itemsReducer);
const [ itemUpdate, setItemUpdate ] = useState(false);
const [ group_id, setGroupId ] = useState(false);
useEffect(() => {
updateItemValue()
}, [itemUpdate])
function updateItemValue(){
// original items value
/*
[
{"_id":1, "name":"Item 1", "description":"Item 1 description"},
{"_id":2, "name":"Item 2", "description":"Item 2 description"},
{"_id":3, "name":"Item 3", "description":"Item 3 description"}
]
*/
// step 3 : now this function get called because the group_id is updated
items.forEach((item, i) => {
if (group_id == item.group_id) {
// step 4 : update the value of items state, add extra data, once this updated, I expect the new items value to be passed to child component
items[i].extra = true;
}
});
}
// step 2 : update the group_id and set the itemUpdate to true to trigger useEffect
function selectGroup(group_id){
setItemUpdate(true)
setGroupId(group_id)
}
return(
<div>
{/* step 1: select option */}
<button onClick={() => selectGroup(1)}>Option 1</button>
<button onClick={() => selectGroup(2)}>Option 2</button>
{
items.map((item) => (
<ItemCard
key={item._id}
id={item._id}
name={item.name}
description={item.description}
onClick={(value) => updateSelectedItem(value)}
/>
))
}
</div>
)
}
Child Component
export default function ItemCard({id, name, description, onClick, extra}){
console.log(extra) // the value is undefined when selectGroup() 1st triggered from parent
return (
<div onClick={() => onClick(id)}>
<div>
<p>{name}</p>
<p>{description}</p>
{ extra ? '<p>Extra item is required</p>' : null }
</div>
</div>
)
}
p/s : the state items came from redux state. So the state update at updateItemValue() is to add some extra value which I want to use at child component.

Answer 1

Issue
You are mutating an object reference
function updateItemValue(){
items.forEach((item, i) => {
if (group_id == item.group_id) {
items[i].extra = true; // <-- state object mutation!
}
});
}
Solution
Looks like you are using Redux since you are using the useSelector react hook.
const { items } = useSelector(state => state.itemsReducer);
I'll assume you have access to a useDispatch hook and action to dispatch to update your state as well.
You can likely simplify your component code a bit, and move the update logic to the reducer so stat is correctly updated.
const SelectItem = () => {
const { items } = useSelector((state) => state.itemsReducer);
const dispatch = useDispatch();
// step 2: dispatch action to update state via the group_id
function selectGroup(groupId) {
dispatch({ type: "UPDATE_GROUP", groupId });
}
return (
<div>
{/* step 1: select option */}
<button onClick={() => selectGroup(1)}>Option 1</button>
<button onClick={() => selectGroup(2)}>Option 2</button>
{items.map((item) => (
<ItemCard
key={item._id}
id={item._id}
name={item.name}
description={item.description}
onClick={(value) => updateSelectedItem(value)}
/>
))}
</div>
);
};
I'm going to just guess at the reducer function now, it may be similar to the following.
const initialState = {
items: [],
}
const itemsReducer = (state = initialState, action) => {
switch (action.type) {
...
// step 3: update items array by matching item group id
case "UPDATE_GROUP":
return {
...state,
items: state.items.map((item) =>
item.group_id === action.groupId
? {
...item,
extra: true
}
: item
)
};
...
default:
return state;
}
};
Additional Suggestion
You can also simplify the child component ItemCard a bit. Direct attach the click handler and simplify the conditional rendering. Also, I don't know if it was intentional (I think not), but you may not want the string literal "<p>Extra item is required</p>" rendering.
function ItemCard({ name, description, onClick, extra }) {
return (
<div onClick={onClick}>
<div>
<p>{name}</p>
<p>{description}</p>
{extra && <p>Extra item is required</p>}
</div>
</div>
);
}
And update the mapping in the parent. Don't pass an id prop, but pass the item._id to the updateSelectedItem callback.
{items.map((item) => (
<ItemCard
key={item._id}
name={item.name}
description={item.description}
onClick={() => updateSelectedItem(item._id)}
/>
))}