Updating the state of the Home page component from an IonModal

TLDR: I am adding data to the Redux store from an Ionic Modal that should be displayed on the home page, but when the modal is closed the home page isn’t updating to show the new data.

I have an IonModal that I’m using to get data from an API. I then add the response data to a list in my Redux store which is being displayed on the Home Page.

Here is the Home page React Code:

export default function Home(): ReactElement {
  const quotes = useSelector((state: any) => state.quotes);
  const [data, setData] = useState([]);

  useEffect(() => {
    setData(quotes);
  }, [quotes]);

  return (
    <IonPage>
      <IonContent fullscreen>
        <Modal />
        {data.map((q: any) => {
          return <p key={q?._id}>{q?.content}</p>;
        })}
      </IonContent>
    </IonPage>
  );
}

and here is the modal React code:

export default function Modal(): ReactElement {
  const [showModal, setShowModal] = useState(false);
  const dispatch = useDispatch();

  const getData = async () => {
    const quote = await axios.get("https://api.quotable.io/random");
    dispatch(addQuote(quote.data));
    setShowModal(false);
  };

  return (
    <>
      <IonButton onClick={() => setShowModal(true)}>Open Modal</IonButton>
      <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
        <IonButton onClick={() => getData()}>Get Data</IonButton>
      </IonModal>
    </>
  );
}

When that getData() function is run in the modal I would expect the modal to be closed and the data to be shown on the home page but currently, the home page is not updating even though the data is in the redux store. I think it has something to do with the component not being mounted when the redux state is updated. If this is the case how would I make the component update when it is mounted?

I’m quite confused so any help or advice would be much appreciated, Cheers.

1 post - 1 participant

Read full topic