setting setState in react hooks

Question

I have two buttons create signature and Create delivery in PageOne.tsx , at the moment when state is InDelivery then both are visible.

My point is how to hide Create delivery button in the beginning, but when user clicks create signature button which is in PageTwo and inside that page user clicks Submit button which takes user back to this PageOne.tsx .

Then here only Create delivery button should be visible, would appreciate if somebody use my code and provide working example, (I'm new to react) my code:

import React, { ReactNode, useContext, useEffect, useState } from "react";
export function PageOne(props: React.PropsWithChildren<OrderDetailsDto>) {

    const [deliveredd, setDeliveredd] = useState(false);

    const RedirectToSign = () => {
        setDeliveredd(true);

        history.push("/PageTwo/" + orderId);
    };

    const RedirectToDeliv = () => {
        history.push("/PageThree/" + orderId);
    };
    const SignatureButton = () => {
        if (initialRequest.type == ApiRequestStatus.Complete) {
            var state = initialRequest.responsePayload.order?.state as OrderState;

            if (state == OrderState.InDelivery || state == OrderState.Delivered) {
                return (
                    <div onClick={RedirectToSign} className="Button">
                        create signature
                    </div>
                );
            }
        }
    };
    const UpdateButton = () => {
        if (state === OrderState.InDelivery) {
            return (
                <div onClick={RedirectToDeliv} className="Button">
                    Create delivery
                </div>
            );
        }
    }
    console.log(deliveredd);
    return (
        <div className="orderDetails">

            {UpdateButton()}
            {SignatureButton()}
        </div>
    );
}

my PageTwo would be something like this:

import React from "react";
import { Button, Form, Input } from "antd";


export function PageTwo(props: React.PropsWithChildren<CreateSignatureProps>) {


    const SendSignature = (values: Values) => {

        api.cargoApi
            .apiCargSignaturePost(request)
            .then((response) => history.push("/PageOne/" + orderId));
    }


    return (
        <Form onFinish={SendSignature}>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    {t("signature.create")}
                </Button>
            </Form.Item>
        </Form>
    );
}

Answer 1

Here is what you can do. When you are redirecting from PageTwo to PageOne , pass a state which indicates which button to hide and which button to show in PageOne .

In PageTwo :

history.push({
  pathname: "/PageOne/" + orderId,
  state: { hideCreateDelivery: true,  showCreateSignature: true}
})

In PageOne :

// to get the data from redirection
import { useLocation } from "react-router-dom";

// Inside PageOne
const location = useLocation();

// replace this
return (
  <div className="orderDetails">
    {location.state && location.state.hideCreateDelivery ? null: UpdateButton()}
    {location.state && location.state.showCreateSignature 
      ? SignatureButton()
      : null}
   </div>
 );