Context not returned when referencing React component as function instead of JSX

Question

I want to avoid creating a named component when rendering a child component of a parent. That is, I have the working code below where the dataValueFromContext is returned from InsideComponent and rendered correctly from MyList component (MyContext is available higher in the component tree).

const InsideComponent = () => {
  const { dataValueFromContext } = useContext(MyContext);
  return (
    <span>
      value: {dataValueFromContext}
    </span>
  );
};

export default function MyList() {
  return (
    <div>
      <InsideComponent />
    </div>
  );
}

The problem is that when I want to remove InsideComponent as a named component and nest it anonymously. Something like what I have below, the code does not even compile. I'm basically trying to avoid creating a named function as well as needing a defined function at the top. For me, this makes readability easier.


export default function MyList() {
  return (
    <div>
      {
        () => {
          const { dataValueFromContext } = useContext(MyContext);
          return (
            <span>
              value: {dataValueFromContext}
            </span>
          )
         }
    </div>
  );
}

You cannot call hooks inside nested functions. React Documentation on Hooks — mahieyin-rahmun
– mahieyin-rahmun, Commented Sep 10, 2022 at 20:01

Hasan Aga · Accepted Answer · 2022-09-10 20:05:18Z

Two problems:

Your anonymous function component is not being called which means it will never return anything to be rendered.
if you do call it, Eslint will warn you that you can only use a hook inside a functional component's body.

Having that said, you can call the function as follows:

export default function MyList() {
  return (
    <div>
      {
        (() => {
          const { dataValueFromContext } = useContext(MyContext);
          return (
            <span>
              value: {dataValueFromContext}
            </span>
          ))()
         }
    </div>
  );
}

A much better approach is to simply move the useContext outside of return and get rid of the anonymous function all together:

export default function MyList() {
  const { dataValueFromContext } = useContext(MyContext);

  return (
    <div>
       <span>
         value: {dataValueFromContext}
       </span>           
    </div>
  );
}

Collectives™ on Stack Overflow

Context not returned when referencing React component as function instead of JSX

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related