score:273
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>
score:-4
so you have a value like this "hello world", and we'll say it's in this.props.value
.
you can do this:
var parts = this.props.value.split(" "), array = [];
for (var i=0; i<parts.length; i++){
// add the string
array.push(<span key={i * 2}>{parts[i]}</span>);
// add the nbsp
array.push(<span key={i * 2 + 1}> </span>);
}
// remove the trailing nbsp
array.pop();
return <div>{array}</div>;
jsbin
score:0
if you want to display a pretty xml:
var str = "<test>\n\t\t<value>1</value>\n</test>\n".replace(/</g, '<').replace(/>/g, '>').replace(/\t/g, "\u00a0").replace(/\n/g, '<br/>');
return (
<div dangerouslysetinnerhtml={{__html: str}} ></div>
)
score:0
well it's very hard to type on here without it disappearing, so i'm adding a little whitespace so everyone can see it. if you remove the whitespace from this tag < nbsp />, then you'll be able to use a non-breaking space in react.
react translates this jsx tag into a non-breaking space. weird quirk: this must also be used on the same line as the text you want to space. also, non-breaking spaces with this tag don't stack in react.
score:0
to remove space in between string, below code works for me. eg: "afee dd " result: "afeedd"
{myvalue.replace(/\s+/g, '')}score:43
i know this is an old question, and this doesn't exactly do what you asked for, but rather than editing the string, what you want to achieve is probably be solved better using the css white-space: nowrap
attribute:
in html:
<div style="white-space: nowrap">this won't break lines</div>
in react:
<div style={{ whitespace: 'nowrap' }}>{myvalue}</div>
Source: stackoverflow.com
Related Query
- ReactJS render string with non-breaking spaces
- Datatables.net with ReactJS, render a ReactJS component in a column
- Reactjs How to insert react component into string and then render
- How to render a string with JSX in React
- Non blocking render in ReactJS
- Reactjs : Append instead of replacing with render method
- Semantic UI sidebar throws console errors with ReactJS when render app to body
- Reactjs unexpected infinite loop with render
- ReactJS double render for a Boolean state with useState
- Why cannot render HTML with ReactJS
- How to correctly convert a pdf string to pdf on reactjs front end? (blank pdf with puppteer)
- How to render a html string content in PDF using JsPDF in ReactJS
- Reactjs render JSX with dynamic text value
- ReactJS - How to have a string with multiple colors for each characters
- Reactjs Render issue on popover with data fetched from BE
- Replace part of html string with React.js component and render (without dangerouslySetInnerHTML)
- Proper way to render integer array as a string with commas in JSX
- How to render countdown function with ReactJS
- Isomorphically render html string with Koa
- reactjs render span tag with ternary operator
- Render prop as string or component with Typescript
- Render images from files array on client with Reactjs
- How to render react-data-grid in non index file with exporting?
- ReactJS - MaskedInput adds extra spaces when dealing with Zip code masked input
- ReactJS how to render an HTML object span element within a string
- Render iFrame video using YouTubes JS API with Reactjs
- How does render work in ReactJS with those HTML tags being "returned"
- The error of 'Duplicate string index signature' at Reactjs with Typescript
- Fetch GET request with Reactjs - how do i implement a reusable component within my request to render my data?
- How to render a react component from html string in ReactJS while setting in dangerouslysetinnerHtml?
More Query from same tag
- How to implement open curtain animation
- How to debug this Firestore/React expression?
- Proper use of `MockedProvider` on searching query
- React setState for Font Color with array index
- ReferenceError: module is not defined
- Make Jest ignore the .less import when testing
- Keeping Material UI tabs and React Router in sync
- npm start error with create-react-app with react script version : "4.0.1"
- Simplify the design for auto-suggestion
- React Router v6 Redirects
- simple react-pose opacity transition dont work
- What caused this warning in react-router?
- react-redux action creator not available on props
- Client side state is not hydrated from server on page reload
- Cannot apply any Bootstrap style in using React-bootstrap library
- Could not find react-redux context value; please ensure the component is wrapped in a <Provider> even if already wrapped in a provider
- Remove attribute in object propertie inside array
- Simulate change for textarea Jest test
- Getting started testing React components with Enzyme and Jest
- In React.js, how can I change header of the page according to url in app.js
- React Redux append components
- How to render different data on dropdown selection using Material's UI Select?
- When using HashRouter in ReactJS this.props.location.state is undefined on page refresh
- Ajax call in MobX: MobX observer: Store is not available! Make sure it is provided by some Provider
- NextJs: Calling setInterval with a variable for time inside of a React useEffect Hook
- Changing state of a child element from App component
- How do I filter based on matching keyword?
- Material UI's Stepper StepLabel Icon issue with undefined
- Blank page after deployment - React app with node
- Can I open a jw modal (imported from jw-react-modal) in reactjs without button click