refactoring rendering

refactoring.md

BEFORE

const Component = () = {

  // a
  // lot
  // of 
  // logic

  return (
    <div>
      {error && <Error />}
      {someOtherBoolean ? (
        <SomeComponent />
      ) : (
        <AnotherComponent />
      )}
    <div>
  )

}

AFTER

const Wrapper = ({error, children}) => (
  <div>
    {error && <Error />}
    {children}
  </div>
)

const Component = () = {

  // a
  // lot
  // of 
  // logic

  if (someOtherBoolean) {
    return (
      <Wrapper error={error}>
        <SomeComponent />
      </Wrapper>
    );
  }

  return (
    <Wrapper error={error}>
        <AnotherComponent />
    </Wrapper>
  );

}