renderProp.jsx

```
const CustomErrorMessage = (props) => {
  // state simulation
  const errorMessage = "Fullname is required"
  
  // fun one liner 
  // return props.children?.(errorMessage) || <span>{errorMessage}</span>

  if (props.children) {
    return props.children(errorMessage)
  } else {
    return (
      <span>{errorMessage}</span>
    )
  }
  
}

export function App(props) {
  return (
    <div className='App'>
      <CustomErrorMessage>
        {
          (errorMessage) => {
            return (
              <h1>😣 {errorMessage}</h1>
            )
          }
        }
      </CustomErrorMessage>
      <CustomErrorMessage />
      <CustomErrorMessage>
        {
          (errorMessage) => {
            return (
              <div>
                <span>😣 {errorMessage}</span>
              </div>
            )
          }
        }
      </CustomErrorMessage>
    </div>
  );
}
```