React render() without html tags?

Question

Why can't I do this in react?

import React from 'react';

export default class App extends React.Component {
    somefun() {
        return (<p>hello</p>);
    }
    render() {
        return ( 
            {somefun()}
        )
    }
 }

When I try I get a compile error

SyntaxError: C:\Users\karln\baeldung\my-app\src\App.js: Unexpected token, expected "{" (9:13)

   7 |  render() {
   8 |          return (
>  9 |                  {somefun()}
     |                            ^
  10 |          )
  11 |  }
  12 |  }

I'm new to react and getting through, but this one kind of vexes me.

You can use JSX in other functions. The problem here is that the brackets can only be used inside of the JSX tree. You can either eliminate the brackets completely, or wrap them into a JSX element: return (<div>{someFun()}</div>) — comonadd
– comonadd, Commented Apr 16, 2021 at 12:45
I saw that I could do (<div>{somefun()}</div>) but I thought that was messy. What is <>{somefun()}<> and what does it do? I assume that would not generate any html other than what is produced by somefun ? — K.Nicholas
– K.Nicholas, Commented Apr 16, 2021 at 12:48

Sullivan Tobias · Accepted Answer · 2021-04-16 12:47:47Z

1

You need root element

<> </>

or

React.Fragment or whatever the tag is

answered Apr 16, 2021 at 12:47

Sullivan Tobias

1525 bronze badges

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

5 Comments

K.Nicholas Over a year ago

Can you clarify what you mean by React.Fragment ? Would that be instead of React.Component ?

K.Nicholas Over a year ago

Oh, I see, so it's longhand for <> </>.

Sullivan Tobias Over a year ago

Yes it is, to be honest i prefer longhand, it's way more clean

Dave Newton Over a year ago

@SullivanTobias What is the definition of "clean" here?

Sullivan Tobias Over a year ago

Yes I should have been clearer I should say that in a context where the render is not super long you can use the shorthand But I find that when there are many more elements, I find the longhand much more meaningful. In the end I only use longhand now for comprehension reasons. But everyone has their own way of doing things in the end

Mert Karagöz · Accepted Answer · 2021-04-16 12:47:51Z

1

You can use

<> {somefun()} </>

This is React Fragment. It does not write any html tags like div, p...

answered Apr 16, 2021 at 12:47

Mert Karagöz

713 silver badges9 bronze badges

Comments

Ben West · Accepted Answer · 2021-04-16 12:46:29Z

0

{} isn't valid there. It's used to interpolate values in JSX (like <h1>{title}</h1>) but you aren't in a JSX element there.

answered Apr 16, 2021 at 12:46

Ben West

4,5861 gold badge19 silver badges17 bronze badges

1 Comment

K.Nicholas Over a year ago

Thanks for all the replies, exactly what I needed!

Murtaza Usmani · Accepted Answer · 2021-04-16 13:29:12Z

0

You need a root element first

render(){
return(
<div>
{somefun()}
</div>
)}

answered Apr 16, 2021 at 13:29

Murtaza Usmani

11 bronze badge

Collectives™ on Stack Overflow

React render() without html tags?

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related