How to set the value of a React component prop using a function?

Question

In one of my React components, I track whether a form is dirty by comparing the hash of a data structure to see if it has changed. Here are the pertinent portions of code (which is non-working):

export const CategoryEdit = (props) => {

    // ... 

    const isDirty = () => {
        return (hash(categoryInfo.data) === dataHash);
    }

    return (
        <>
            <SaveBar isShown={isDirty} />
            <p>...</p>
        </>
    )

}

How can I make it so the SaveBar calls the isDirty function on every render and dynamically shows/hides itself as appropriate? Is this possible?

Answer 1

export const CategoryEdit = (props) => {

// ... 

const isDirty = (dataHash) =>() => {
    return (hash(categoryInfo.data) === dataHash);
}

return (
    <>
        <SaveBar isShown={isDirty(value)} />
        <p>...</p>
    </>
)

}