React | render html tag in jsx

user_3103101 0
Viewed 107

How do render string along with html tag in react. I just want to add redirecting in 10 seconds to next line but I'm getting [object object] instead. 

tip={"Please wait!" +<br/ >+"Redirecing in 10 seconds..."}

enter image description here DEMO: CodeSandbox Link

reactjs html javascript
6 Answers

According to the Doc :

Tip should be a string , use \n for line breaks and add whiteSpace: "break-spaces to the style of the Spin:

<Spin tip={"Please wait! \n Redirecing in 10 seconds..."} style={{ whiteSpace: "break-spaces"}}>


ReactDOM.render(
  <antd.Spin tip={"Please wait! \n Redirecing in 10 seconds..."} style={{ whiteSpace: "break-spaces"}}>
    <antd.Alert
      message="Alert message title"
      description="Further details about the context of this alert."
      type="info"
    />
  </antd.Spin>,
  document.getElementById("container")
);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.2/antd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.2/antd.min.js"></script>
<div id="container"></div>

user_73282180

you can try like this:

<Spin tip={<span><br />"Loading..."</span>}>
user_128827230

You can try add "\n" into the string

user_16390120

You should put everything inside a jsx tag without quotes and concatenation, like this:

tip={<span>Please wait!<br/ >Redirecing in 10 seconds...</span>}
user_28241000

It might be something like <Spin tip={[<br />, "Loading..."]}>.

user_10168830

You can not send HTML tags inside Spin component of ant design spin prop.

It will always consider it a string and will not render the HTML.

I think this helps to prevent unnecessary code into our app.

user_55997700
Related