CODEWITHSUNDEEP
reactjsreact-propsreact-state
johann1301s
johann1301s

Reputation: 534

Is it ok to use react state in render prop?

I have two components App and MyComponent, where MyComponent is used in App.

import { useState } from "react";
import { MyComponent } from "./myComponent";

export const App = () => {
  const [state, setState] = useState(0);

  return (
    <>
      <MyComponent
        render={() => (
          <button onClick={() => setState((prev) => prev + 50)}>{state}</button>
        )}
      />
    </>
  );
}


export const MyComponent = (props) => {
  const Content = props.render;

  return (
    <div>
      <Content/>
    </div>
  );
};

Is it ok to use state in the return value of the render prop? Is it considered anti-pattern?

Upvotes: 1

Views: 58

Answers (1)

kind user
kind user

Reputation: 41893

Is it ok to use react state in render prop?

Yes, but... why? children prop was created to achieve exactly what you want here.

<MyComponent>
  <button onClick={() => setState((prev) => prev + 50)}>{state}.</button>
</MyComponent>

export const MyComponent = ({ children }) => (
  <div>
    {children}
  </div>
);

Upvotes: 1

Related Questions