Why render props is not working with Curly Braces in render function?

Question

I am working in React Render Props. So, whenever I use Curly Braces in render function and passing as a props of Counter component my clickCounter component is not called. But it is working when I use parenthesis instead of curly braces. So why is this happening? Why curly braces is not working in a arrow function but parenthesis is working.

clickCounter.js

import React from "react";

const ClickCounter = (props) => {
  console.log("called");
  console.log(props);
  return (
    <div>
      <p>You clicked {props.count} times</p>
      <button onClick={props.handleIncrement}>Click me</button>
    </div>
  );
};

export default ClickCounter;

Counter.js

import React from "react";

class Counter extends React.Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState((prevState) => {
      return { count: prevState.count + 1 };
    });
  };
  render() {
    console.log(this.props);
    const { render } = this.props;
    return render(this.state.count, this.handleIncrement);
  }
}
export default Counter;

App.js not working

import React from "react";
import ClickCounter from "./HOC/ClickCounter";
// import HoverCounter from "./HOC/hoverCounter";
import Counter from "./RenderProps/Counter";

function App() {
  return (
    <div className="App">
      {/* <ClickCounter></ClickCounter>
      <HoverCounter></HoverCounter> */}
      <Counter
        render={(a, b) => {
          <ClickCounter count={a} handleIncrement={b}></ClickCounter>;
        }}
      />
    </div>
  );
}

export default App;

App.js Working

import React from "react";
import ClickCounter from "./HOC/ClickCounter";
// import HoverCounter from "./HOC/hoverCounter";
import Counter from "./RenderProps/Counter";

function App() {
  return (
    <div className="App">
      {/* <ClickCounter></ClickCounter>
      <HoverCounter></HoverCounter> */}
      <Counter
        render={(a, b) => (
          <ClickCounter count={a} handleIncrement={b}></ClickCounter>
        )}
      />
    </div>
  );
}

export default App;

Why there is difference between () and {} ?

score 1 · Accepted Answer · answered May 23 '22 at 02:32

These are different:

const myFunc1 () => (true)
const myFunc2 () => {true}

The first case is a function that returns the boolean true.

The second case is a function whose body is just the expression true, but it returns nothing.

The correct version of myFunc2 that works like myFunc1 is this:

const myFunc2 () => { return true }

This is the problem in your broken App code: when you use curly braces, you're defining a block scope for the function's body, and a function like that must use the return keyword to actually return something.

This difference is especially relevant when you want an arrow function to return an object, like so:

// this breaks!
const getMyPet = () => { species: 'dog', name: 'Fido' }

It's true that this is a valid object initializer: { species: 'dog', name: 'Fido' }, but in this context it creates ambiguity for the JS parser, because { and } are how you delimit a function body. For this reason, if you want an arrow to return a plain object, you must wrap that object with parentheses:

// this works
const getMyPet = () => ({ species: 'dog', name: 'Fido' })

Why render props is not working with Curly Braces in render function?

1 Answers1