I'm confused about this condition
typeof and React.isValidElementif (
typeof props.headerComponent == "function" &&
React.isValidElement(props.headerComponent())
)
return props.headerComponent();
typeofif (typeof props.footerComponent == 'function')
return props.footerComponent();
if i used 1st condition, there's no error but when i used 2nd condition React show me
Error: RenderFooter(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
someone can tell me what's the different between 1st and 2nd condition ?
i thought both of it return a function
const Custom = (props) => {
const RenderHeader = () => {
if (
typeof props.headerComponent == 'function' &&
React.isValidElement(props.headerComponent())
)
return props.headerComponent();
else if (React.isValidElement(props.headerComponent))
return props.headerComponent;
else return null;
};
const RenderFooter = () => {
if (typeof props.footerComponent == 'function')
return props.footerComponent();
else if (React.isValidElement(props.footerComponent))
return props.footerComponent;
else return null;
};
return (
<div>
<RenderHeader />
<RenderFooter />
</div>
);
};
class App extends React.Component {
render() {
return (
<div>
Hello React!
<Custom
headerComponent={() => console.log('header')}
footerComponent={() => console.log('footer')}
/>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById("root")
);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>