Value from Context Not Rerendering

Viewed 30

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!

0 Answers
Related