Rendering empty space in React
You could use <span> </span>
:
class Blinker extends React.Component { constructor(props) { super(); this.state = { appear: true } this.blinker = this.blinker.bind(this); }
blinker() { this.setState({appear: !this.state.appear }); }
componentDidMount() { setInterval(this.blinker, 1000) }
componentWillUnmount() { clearInterval(this.blinker); }
render() { const name = "testing"; const underScore = "_"; const com = "com"; return ( <div> <div id="test"> { name } </div> <div id="test"> { (this.state.appear) ? underScore : <span> </span>} </div> <div id="test"> { com } </div> </div> ); }}
ReactDOM.render(<Blinker />, document.getElementById('app'));
#test { display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>
Render conditionally a component without losing "empty" space - ReactJS
just add visibility
style to your div contain message, then set it visible : hidden
to show or hide it
style={{ height: '50px', visibility : condition ? 'visible' : 'hidden' }}
Best practice when adding whitespace in JSX
Because  
causes you to have non-breaking spaces, you should only use it where necessary. In most cases, this will have unintended side effects.
Older versions of React, I believe all those before v14, would automatically insert <span> </span>
when you had a newline inside of a tag.
While they no longer do this, that's a safe way to handle this in your own code. Unless you have styling that specifically targets span
(bad practice in general), then this is the safest route.
Per your example, you can put them on a single line together as it's pretty short. In longer-line scenarios, this is how you should probably do it:
<div className="top-element-formatting">
Hello <span className="second-word-formatting">World!</span>
<span> </span>
So much more text in this box that it really needs to be on another line.
</div>
This method is also safe against auto-trimming text editors.
The other method is using {' '}
which doesn't insert random HTML tags. This could be more useful when styling, highlighting elements, and removes clutter from the DOM. If you don't need backwards compatibility with React v14 or earlier, this should be your preferred method.
<div className="top-element-formatting">
Hello <span className="second-word-formatting">World!</span>
{' '}
So much more text in this box that it really needs to be on another line.
</div>
Preserve space in React rendered element
I am not sure if React JS messes up the space as it's just HTML. Use the following CSS on the element:
white-space: pre-wrap;
Working Demo: wmnk7rmq8 - CodeSandbox
How to remove Blank Spaces from the React app if there is no data available for it?
You can use conditional rendering as follows based on the existence of Def.synonyms
value. If it's undefined or null, then component won't be shown.
Read more on conditional rendering here.
import React from "react";
const Synonyms = ({ mean }) => {
return (
<>
{mean.map((Val) => {
return Val.meanings.map((Means) => {
return Means.definitions.map((Def) => {
return (
<>
{Def.synonyms ? (
<li className="text-capitalize fs-5 text-start">
{`${Def.synonyms}`}
</li>
)}
</>
);
});
});
})}
</>
);
};
export default Synonyms;
Or you can return it as follows to show the "data not available" quote.
return (
<>
<li className="text-capitalize fs-5 text-start">
{!Def.synonyms ? `${Def.synonyms}` : "data not available"}
</li>
</>
);
ReactJS render string with non-breaking spaces
Instead of using the
HTML entity, you can use the Unicode character which
refers to (U+00A0 NON-BREAKING SPACE):
<div>{myValue.replace(/ /g, "\u00A0")}</div>
Related Topics
Download Image as File in Typescript
How to Clear All Input Fields in Bootstrap Modal When Clicking Data-Dismiss Button
Node.Js MySQL Query in a for Loop
How to Format Numbers in Vuejs
Reactjs - Multiple If Conditions Inside Map Function
Access a Variable Outside of .Then Function
How to Highlight Parts of an Imagemap on Mouseover
How to Redirect Url After Login Successful Via Ajax Call in PHP
How to Show a Confirm Message Before Delete
React Router Dom Returns a Blank Page When Going to a Particular Route
Blob Download Is Not Working in Ie
How to Combine First Name and Last Name in JavaScript
Vuejs Error, Invalid Prop: Type Check Failed for Prop. Expected Date, Got Number With Value
Ios Safari/Chrome - Unwanted Scrolling When Focusing an Input Inside the Modal
Error Ts2739: Type '{}' Is Missing the Following Properties from Type
How to Disable Button After (Click) in Angular