Is there any way to pass FontAwesome as an element prop? I'm trying to do something like
<input
placeholder={" Search " + searchFor}
/>
but that will display hex code as a string rather than decode to proper font value when it will be as
placeholder=" Search ..."
Any tips on that?
You are trying to HTML-encode your UTF-8 symbol, which does not work because React is not HTML (although it looks a lot like it...)
So if you don't use the HTML-encoding but instead the JavaScript encoding "\uF002", your symbol should be displayed the way you want it.
Related
I'm a new user of TinyMCE, and i'm trying to incorporate it in my React App. But i'ma actually getting an output problem. When try "format:text" in the tiny component, and try to create a post in my blog using bold and italic options, when the post is posted, the displayed text is just normal, without bold or italic properties. So, I've tried the "format:html" but in this case, I get my text without any styles at all, AND we see the <p> balises.
So, it can looks like a stupid question but, how do we output the posted text correctly ?
As always, thx in advance !
This happened to me as well. If you do not want to see the attributes on your output then go to the React Component which is responsible for output and in your React component when you use the return() keyword you should create a div use the
dangerouslySetInnerHTML attribute inside.
Example:
Here's [a link] (https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/)
I know that in React JSX style attribute must be an object. But I'm wondering why it can't be a plain string like normal HTML.
JSX is compiled to normal HTML by React.createElement under the hood.
React.createElement("div", {style:"color: red;"}, "Why does this throw an error?")
Why doesn't style get added to the element like any other normal HTML attribute?
It could, but it would require some extra code.
https://egghead.io/lessons/css-style-html-with-javascript-template-strings-and-objects-in-css-in-js
I guess the first question is, if it's really worth it.
I'm trying to get some data from my state passed down into this img
src url, and I can't seem to figure how to write it. I've tried using back
ticks and the dollar sign. I assume because I'm down in the render part
of the Component that won't work. Help me Obi-Wan, you're my only
hope.
<img src={'https://openweathermap.org/img/w/{data.weather.icon}.png'} alt='weather condition' />
Just like with vanilla JS, you have to use a Template Literal and use string interpolation to place your JS within the string (with a ${...}) like so:
<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />
you can use Template Literal
<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />
SO, I am trying to render html (mixed. i.e normal plus math type tags) using react-html-parser.
It is able to render the normal html but could'nt render the math type tags.
Is there a plugin to render both of them.
Following is my string containing both the content.
"<p>Math test<br />↵<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>25</mn></msqrt></math> <math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mn>2</mn><mn>3</mn></msup></math> <math xmlns="http://www.w3.org/1998/Math/MathML"><mo>∪</mo><mn>2</mn></math> </p>↵"
Thanks.
I saw ReactDOMServer.renderToString(element) can do something similar but element input is not a String I guess.
are you looking for something like dangerouslySetInnerHTML https://facebook.github.io/react/docs/dom-elements.html