Multi-line JavaScript inside JSX?

Question

Is it possible to write a multiline js code in JSX?

return (
      <b>{
      const a = props.users.find((user) => user.id === post.userId)
      console.log(a) // I want to console.log
      return a
      }</b>
);

Look this post please: stackoverflow.com/questions/59375422/… — Welyngton Dal Pra
– Welyngton Dal Pra, Commented Feb 9, 2021 at 16:51

Welyngton Dal Pra · Accepted Answer · 2021-02-18 09:11:12Z

11

If you want to do multi-line JavaScript code, you can wrap your JS code with an IIFE, for example:

  <>
    {(() => {
      const a = [1, 2, 3].find((el) => el === 2)
      // as much code as you want ...
      // ...
      // ...
      console.log(a)
    })()}
  </>

Just in case you don't know, <> & </> are called React fragments, you can use any valid JSX element you want, for example, you can use instead <div>, <b>, <p> or anything like that.

edited Feb 18, 2021 at 9:11

Welyngton Dal Pra

7741 gold badge12 silver badges21 bronze badges

answered Feb 9, 2021 at 11:53

Ekmek

4734 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ekmek Over a year ago

Thanks, man, you really helped me a lot!!

Thomas Over a year ago

Please don't. How about you pull the code a few lines up, out of the markup and only return <b>{a}</b>.

Collectives™ on Stack Overflow

Multi-line JavaScript inside JSX?

Is it possible to write a multiline js code in JSX?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Is it possible to write a multiline js code in JSX?

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related