Menu
In React JSX how can I have the following text include a single quote? Or other punctuation that might need escaping?
return (<p>I've seen the movie.</p>) 
362
Unlike string literals in JavaScript, string literals within JSX attributes can't contain escaped quotes. If you want to have e.g. a double quote within a JSX attribute value, you have to use single quotes as string delimiter.
We can embed any JavaScript expression in JSX by wrapping it in curly braces. But only expressions not statements, means directly we can not put any statement (if-else/switch/for) inside JSX.
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
If you want to display it in an alert window, you need to call a function to trigger the window. However, if you need to show the message in your render, you can use a state to manage that. If you need to toggle the text on button click, you just need to update the onButtonClickHandler function to this.
Render as a JS string literal (with double-quotes):
return (<p>{"I've seen the movie."}</p>) ... or use the HTML entity for an apostrophe, ':
return (<p>I've seen the movie.</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
