Why is this not re-rendering?
Unanswered
American black bear posted this in #help-forum
American black bearOP
Seems like passing an atom as an argument of a function of a prop doesn't force a re-render.
This works.
<Button type="submit" variant="outline" disabled={userDetails.allRoles.length ? true : false}>
{t('save')}
</Button>
This doesn't (is org admin is a utility that also returns true or false):
<Button type="submit" variant="outline" disabled={!isOrgAdmin(userDetails.allRoles)}>
{t('save')}
</Button>
Can someone explain why this is?
This works.
<Button type="submit" variant="outline" disabled={userDetails.allRoles.length ? true : false}>
{t('save')}
</Button>
This doesn't (is org admin is a utility that also returns true or false):
<Button type="submit" variant="outline" disabled={!isOrgAdmin(userDetails.allRoles)}>
{t('save')}
</Button>
Can someone explain why this is?
10 Replies
where is isOrgAdmin defined and being updated @American black bear
American black bearOP
I have a separate access-utils.ts file which contains that util:
import { AllRoles } from '@/graphql/generated/schema-server';
export const isOrgAdmin = (roles: AllRoles[]): boolean => {
return roles.includes(AllRoles.ORG_ADMIN);
};
export const isAdmin = (roles: AllRoles[]): boolean => {
return roles.includes(AllRoles.ADMIN);
};
export const isMember = (roles: AllRoles[]): boolean => {
return roles.includes(AllRoles.ORG_MEMBER);
};
import { AllRoles } from '@/graphql/generated/schema-server';
export const isOrgAdmin = (roles: AllRoles[]): boolean => {
return roles.includes(AllRoles.ORG_ADMIN);
};
export const isAdmin = (roles: AllRoles[]): boolean => {
return roles.includes(AllRoles.ADMIN);
};
export const isMember = (roles: AllRoles[]): boolean => {
return roles.includes(AllRoles.ORG_MEMBER);
};
and hhow does that update?
American black bearOP
I'm using that util function inside my component like this:
Note that userDetails is fetched from an atom like this:
<Button type="submit" variant="outline" disabled={!isOrgAdmin(userDetails.allRoles)}>
{t('save')}
</Button>Note that userDetails is fetched from an atom like this:
const [userDetails, setUserDetails] = useAtom(userDetailsAtom);idk what useAtom is but pretty sure this is a react thing
where do you get AllRoles from?
American black bearOP
Yeah I don't think it's from the state management library.
Something about using a function directly inside JSX doesn't hydrate the ui.
Something about using a function directly inside JSX doesn't hydrate the ui.
It's from an enum
hmm sorry, i dont use many state management libraries for my projects, wait for someone who uses them :D
Sorry
Sorry
American black bearOP
it's ok! thanks for taking the time!