I checked some of the threads about this and tried to fix it, but no succes yet.
I have a parent and a child component. In the parent component, I declare a state and pass the function to update this state on to my child component.
function ProfileGallery() {
const [selectedPet, setPet] = useState(null);
const [filterText, setFilterText] = useState('');
const [pets, setPets] = useState([]);
const [componentState, setState] = useState('test');
const updateState = (state) => {
setState(...state);
};
return (
<PetInformation
selectedPet={selectedPet}
componentState={componentState}
triggerParentUpdate={updateState}
/>
);
}
In my child component, I do the following:
function PetInformation({ componentState, triggerParentUpdate, ...props }) {
const [status, setStatus] = useState('Delete succesful');
const { selectedPet } = { ...props } || {};
const updatedComponentState = 'newState';
useEffect(() => {
if (status === 'Delete pending') {
deletePet(selectedPet).then(() => setStatus('Delete succesful'));
}
}, [status]);
const handleDelete = () => {
setStatus('Delete pending');
};
return (
<button
className="btn btn-primary pull-right"
onClick={() => {
handleDelete();
triggerParentUpdate(updatedComponentState);
}}
type="button"
>
Delete Pet
</button>
There’s of course more code in between, but this shows the gist of what I’m trying to achieve. I want to delete an item I selected in my gallery and have that delete reflected once I click the delete button -> my ProfileGallery needs to re-render. I’m trying to do this by passing that function to update my state on to the child component. I know JS won’t consider state changed if the reference remains the same, so that’s why I am passing a new const updatedComponentState on, since that should have a different reference from my original componentState.
Everything works, the item gets removed but I still need to manually refresh my app before it gets reflected in the list in my gallery. Why won’t ReactJS re-render my ProfileGallery component here? Isn’t my state getting updated?
