hide button from specific pages

Question

I have a project that contains three pages, the first one owns the index number “0”, the second one owns the index number “1” and the third one owns the index number “2”.

And I have a Next button, and I have a Preview button, and I used a dynamic method to have a single button that just changes its address according to the address passed,

And I want to hide the "previous" button from the first page, and I want to hide the "Next" button from the last page.

how can i solve the problem ?

import { Button } from '@chakra-ui/button';
import React from 'react';

export const StepperButton: React.FC<{ title: string, num: number; onClick: (...args: any) => void }> = ({ title, num, onClick }) => {

    const [show, setShow] = React.useState(false);


    const disabledButton = () => {
        if (title === 'Previous' && num === 0) {
            return true;
        }
    }

    const hideButton = () => {
        if (title === 'Next' && num === 2 || title === 'Previous' && num === 0) {
            return false;
        }
    }



    return <>
        <Button
            style={{
                width: '244.71px',
                height: '41.41px',
                backgroundColor: '#FF8C1E',
                borderRadius: '8px',
                fontWeight: '600',
                fontSize: '14px',
                lineHeight: '21px',
                color: '#FFFFFF',
                textTransform: 'uppercase'
            }}
            isDisabled={disabledButton()}
            // onClick={()=>{ onClick; onOpen; }}
            onClick={() => { onClick(); hideButton(); }}
        >
            {title}</Button>

    </>
}

Answer 1

You can use ternary operator in return. Like that.

 return <> 
        { (num === 0 && title === "Previous") || (num === 2 && title === "Next")
        ? 
        "" 
        :
        (
          <Button
            style={{
                width: '244.71px',
                height: '41.41px',
                backgroundColor: '#FF8C1E',
                borderRadius: '8px',
                fontWeight: '600',
                fontSize: '14px',
                lineHeight: '21px',
                color: '#FFFFFF',
                textTransform: 'uppercase'
            }}
            isDisabled={disabledButton()}
            // onClick={()=>{ onClick; onOpen; }}
            onClick={() => { onClick(); hideButton(); }}
          >
            {title}</Button>
         )
       }
    </>