Menu
react-empty
<div data-reactroot>
<!-- react-empty: 3 -->
<!-- react-empty: 26 -->
</div>
What is this node ? Why can it render to a React Component ? How to do like this?
446
The React framework offers a shorthand syntax for fragment components that appears as an empty tag: <></> . While it is supported in JSX syntax, it is not part of the HTML standard and thus is not supported natively by browsers. For more information see: Fragments - short syntax.
To check if a string is empty in React, access its length property and check if it's equal to 0 , e.g. if (str. length === 0) {} . If the string's length is equal to 0 , then the string is empty, otherwise it isn't empty. Copied!
To check if a variable is null or undefined in React, use the || (or) operator to check if either of the two conditions is met. When used with two boolean values the || operator returns true if either of the conditions evaluate to true . Copied!
To return nothing from a React component, simply return null . When null is returned from a React component, nothing gets rendered.
This is actually part of React's internal support for things like null:
// A perfectly valid component
() => null
// Also a perfectly valid component
const MyComponent = React.createClass({
render() {
if (this.props.hidden) return null;
return <p>My component implementation</p>;
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
