Why render props mean messy code

*angels-singing*.jsx

function App(things) {
  const newData = useGetNewData(things);
  
  function handleClick() {
    if (newData.length > 0)) {
      // Woohoo
    }
  }  
  
  return (
    <>
      <h1>Hello</h1>
      {newData.map(thing => (
        <div>{thing} is really cool</div> 
      ))}
      <button type="button" onClick={handleClick}>Click me</button> 
    </>
  )
}

clean-render-props.jsx

function App() {
  return (
    <MyRenderProp data={things}>
      {({ newData }) => (
        <div>{newData.things}</div>
      )}
    </MyRenderProp>
  );
}

i-dont-think-that-handler-can-hear-me.jsx

function App() {
  function handleClick() {
    if (newData.length > 0)) {
      // Hmm this is gonna fail as we don't have access to `newData`
    }
  }  

  return (
    <MyRenderProp data={things}>
      {({ newData }) => (
        <h1>Hello</h1>
        {newData.map(thing => (
          <div>{thing} is really cool</div> 
        ))}
        <button type="button" onClick={handleClick}>Click me</button> 
      )}
    </MyRenderProp>
  );
}

two-render-props.jsx

function App() {
  return (
    <MyRenderProp data={things}>
      {({ newData }) => (
        <div>{newData.things}</div>
        <FormHandlerRenderProp initialValue={newData.otherThing}>
          {({ values }) => (
            <input value={values.thing} />
          )}
        </FormHandlerRenderProp>
      )}
    </MyRenderProp>
  );
}