Can't include code execution at jsx top level?

user_1497720 0
Viewed 36

For the following code, it will gives exception when include the line {console.log('hello');}

import "./styles.css";

export default function App() {
  const ages = [1, 2];
  return (
    <>
      {ages.map((age) => (
        {console.log('hello');} //include this code gives unexpected token
        <h1>{age}</h1>
      ))}
    </>
  );
}

Edit thirsty-beaver-5t6c6j

What is the syntax rule that gives this error?

jsx reactjs
3 Answers

You are mixing syntax of arrow functions. There is an implicit return pattern which helps use skip the return statement, but with that you cannot write statements inside your code. You have to write an expression to be returned.

Use the curly braces, along with return:

      {ages.map((age) => {
        console.log("hello");
        return <h1>{age}</h1>;
      })}

Arrow functions details

Sandbox

user_101401240

You are returning directly from a map callback function. This should work:

import "./styles.css";

export default function App() {
  const ages = [1, 2];
  return (
    <>
      {ages.map((age) => {
        console.log("hello");
        return <h1>{age}</h1>;
      })}
    </>
  );
}

https://codesandbox.io/s/naughty-lamport-hps84d

user_98337630

The returning value of a function in JSX has to be a React Node, so in order to call the function like that, you need to make it into a fragment, so that you do return a React Node.

import "./styles.css";

export default function App() {
  const ages = [1, 2];
  return (
    <>
      {ages.map((age) => (
        <>
          {console.log('hello')}
          <h1>{age}</h1>
        </>
      ))}
    </>
  );
}
user_144220540
Related