I'm using two variables from a context, but they don't consistently render based on the way I use them in the return.
// given a dictionary and key passed in from context
const {myDict, KEYTOMATCH} = useContext(...);
This works as I expect it to:
{Object.keys(myDict).map((key, index) => {
if (key === KEYTOMATCH) {
return <SomethingToRender />
} else {
return <></>;
}
})}
Why do the below not work?
{myDict[KEYTOMATCH] && (
<SomethingToRender />
)}
{Object.keys(myDict)
.filter((e) => e === KEYTOMATCH)
.map((e) => (
<SomethingToRender />
))}
{Object.keys(myDict).includes(KEYTOMATCH) && (
<SomethingToRender />
)}
{Object.keys(myDict).includes(KEYTOMATCH) ? (
<SomethingToRender />
) : (
<></>
)}
Thank you!