what do small brackets means in reactjs

Question

const layout = (props) =>(
    <Aux>
    <div>Toolbar, SideBar, BAckdrop</div>
    <main>
       <p> hi </p>
    </main>
    </Aux>    
)

my app component

class App extends Component {
  render() {
    return (
      <div>
        <Layout>
          <p>Test</p>
        </Layout>
      </div>
    );
  }
}

The following is the code of my react component and rendering inside my app.js

1) I have replaced the code with { } then it showed error nothing render or return make sense because we have to explicitly say some return to your component then how () brackets are returning without any react

2) so what do () in react means

3) I am wondering if the above code is an arrow function how can it return all the jsx code because in arrow function we are able to return only one variable correct be if i am wrong

score 3 · Accepted Answer · answered Sep 10 '19 at 17:39

3

() are separators in js, they indicate the isolation of a given statement. Components must explicitly return JSX. Like this

const Component = () =>{
    return <div />
}

Single line arrow functions have an implicitly return statement

const Component () => <div />

But when you want to return an expression with more than one line you should isolate it to indicate it's a single statement

const Component = () => (
    <div>
        <div/>
   </div>
)

answered Sep 10 '19 at 17:39

Dupocas

20,285
6
38
56

so it means we are grouping everthing inside one div and return it implicitly without any return – mdvenkatesh nuhk Sep 10 '19 at 17:45

score 1 · Answer 2 · answered Sep 10 '19 at 17:38

The small brackets () has nothing to do with React, it refers to JavaScript separators, read expressions for additional info.

Because JSX is just an object behind the scenes, you may return an ReactElement in a single expression:

const layout = (props) => (<div>I'm Expression</div>)

// The same
const layout = (props) => <div>I'm Expression</div>

// Just multi-line expression
const layout = props => (
  <Aux>
    <div>Toolbar, SideBar, BAckdrop</div>
    <main>
      <p> hi </p>
    </main>
  </Aux>
);

score 1 · Answer 3 · answered Sep 10 '19 at 17:43

1) I have replaced the code with { } then it showed error nothing render or return make sense because we have to explicitly say some return to your component then how () brackets are returning without any react

2) so what do () in react means

Arrow functions allow us to directly return a value without explicitly writing 'return'. However this only works when directly moving the expression which should be evaluated after the arrow. Putting '()' around your expression just groups your expression to make it a single statement when it is multi line.

When putting '{}' after the arrow you define a function body. The code in the function body will be plainly executed. By default 'undefined' will be the return value, unless you actually use 'return' to return a value.

3) I am wondering if the above code is an arrow function how can it return all the jsx code because in arrow function we are able to return only one variable correct be if i am wrong

That's correct, however technically we only return a single value. JSX is just syntactical sugar. The actual result will be the result of a nested React.createElement() call.

what do small brackets means in reactjs

3 Answers3