Why I do not need to put string escape character while passing property in React Component
I was creating a custom component in React and the custom component accepts regex expression as props. Like this -
<CustoInput label='Email Id' width={{width:'50%'}}
regex='^[A-Z0-9]+@[A-Z]+.[A-Z]{2,3}$'
msg='* Improper format'/>
Generally in javascript I would need to put an escape character and the expression should look like this if I pass this as a variable -
'^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$'
But in react, when I pass props values like this, no escape character is required and it works fine.
Why is that?
regex reactjs
asked Nov 21 at 4:58
Shibasis Sengupta
13310
add a comment |
I was creating a custom component in React and the custom component accepts regex expression as props. Like this -
<CustoInput label='Email Id' width={{width:'50%'}}
regex='^[A-Z0-9]+@[A-Z]+.[A-Z]{2,3}$'
msg='* Improper format'/>
Generally in javascript I would need to put an escape character and the expression should look like this if I pass this as a variable -
'^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$'
But in react, when I pass props values like this, no escape character is required and it works fine.
Why is that?
regex reactjs
asked Nov 21 at 4:58
Shibasis Sengupta
13310
add a comment |
I was creating a custom component in React and the custom component accepts regex expression as props. Like this -
<CustoInput label='Email Id' width={{width:'50%'}}
regex='^[A-Z0-9]+@[A-Z]+.[A-Z]{2,3}$'
msg='* Improper format'/>
Generally in javascript I would need to put an escape character and the expression should look like this if I pass this as a variable -
'^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$'
But in react, when I pass props values like this, no escape character is required and it works fine.
Why is that?
regex reactjs
asked Nov 21 at 4:58
Shibasis Sengupta
13310
I was creating a custom component in React and the custom component accepts regex expression as props. Like this -
<CustoInput label='Email Id' width={{width:'50%'}}
regex='^[A-Z0-9]+@[A-Z]+.[A-Z]{2,3}$'
msg='* Improper format'/>
Generally in javascript I would need to put an escape character and the expression should look like this if I pass this as a variable -
'^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$'
But in react, when I pass props values like this, no escape character is required and it works fine.
Why is that?
regex reactjs
regex reactjs
asked Nov 21 at 4:58
Shibasis Sengupta
13310
asked Nov 21 at 4:58
Shibasis Sengupta
13310
edited Nov 21 at 5:20
asked Nov 21 at 4:58
Shibasis Sengupta
13310
asked Nov 21 at 4:58
Shibasis Sengupta
13310
asked Nov 21 at 4:58
Shibasis Sengupta
13310
13310
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Because is an escape character for JavaScript string literals (and thus needs to be escaped to specify a literal backslash); while it has no special significance whatsoever in HTML (and is thus treated as any regular character). Conversely, you'd likely need to escape &, for example (as &), which does not need escaping in JavaScript.
answered Nov 21 at 5:06
Amadan
128k13139191
Thats a very interesting comment (Conversely, you'd likely need to escape &) from React point of view..did not think about it. However, considering I wrote the react function in javascript, should the javascript rule not have precedence?
– Shibasis Sengupta
Nov 21 at 5:16
I guess I got your point. The props are being passed along with HTML and not JS, so the JS rules dont apply?
– Shibasis Sengupta
Nov 21 at 5:20
"However, considering I wrote the react function in javascript!" - You did not write it in JavaScript. You wrote it in JSX, which is a mishmash of JavaScript and basically XHTML, that gets compiled to JavaScript. Inside XHTML, XHTML rules. Outside XHTML, JavaScript rules (as you noted). Also note that interpolated values inside the XHTML bits (the stuff inside curlies) again go with JavaScript rules:regex='{"^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$"}'.
– Amadan
Nov 21 at 5:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405511%2fwhy-i-do-not-need-to-put-string-escape-character-while-passing-property-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Because is an escape character for JavaScript string literals (and thus needs to be escaped to specify a literal backslash); while it has no special significance whatsoever in HTML (and is thus treated as any regular character). Conversely, you'd likely need to escape &, for example (as &), which does not need escaping in JavaScript.
answered Nov 21 at 5:06
Amadan
128k13139191
Thats a very interesting comment (Conversely, you'd likely need to escape &) from React point of view..did not think about it. However, considering I wrote the react function in javascript, should the javascript rule not have precedence?
– Shibasis Sengupta
Nov 21 at 5:16
I guess I got your point. The props are being passed along with HTML and not JS, so the JS rules dont apply?
– Shibasis Sengupta
Nov 21 at 5:20
"However, considering I wrote the react function in javascript!" - You did not write it in JavaScript. You wrote it in JSX, which is a mishmash of JavaScript and basically XHTML, that gets compiled to JavaScript. Inside XHTML, XHTML rules. Outside XHTML, JavaScript rules (as you noted). Also note that interpolated values inside the XHTML bits (the stuff inside curlies) again go with JavaScript rules:regex='{"^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$"}'.
– Amadan
Nov 21 at 5:23
add a comment |
Because is an escape character for JavaScript string literals (and thus needs to be escaped to specify a literal backslash); while it has no special significance whatsoever in HTML (and is thus treated as any regular character). Conversely, you'd likely need to escape &, for example (as &), which does not need escaping in JavaScript.
answered Nov 21 at 5:06
Amadan
128k13139191
Thats a very interesting comment (Conversely, you'd likely need to escape &) from React point of view..did not think about it. However, considering I wrote the react function in javascript, should the javascript rule not have precedence?
– Shibasis Sengupta
Nov 21 at 5:16
I guess I got your point. The props are being passed along with HTML and not JS, so the JS rules dont apply?
– Shibasis Sengupta
Nov 21 at 5:20
"However, considering I wrote the react function in javascript!" - You did not write it in JavaScript. You wrote it in JSX, which is a mishmash of JavaScript and basically XHTML, that gets compiled to JavaScript. Inside XHTML, XHTML rules. Outside XHTML, JavaScript rules (as you noted). Also note that interpolated values inside the XHTML bits (the stuff inside curlies) again go with JavaScript rules:regex='{"^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$"}'.
– Amadan
Nov 21 at 5:23
add a comment |
Because is an escape character for JavaScript string literals (and thus needs to be escaped to specify a literal backslash); while it has no special significance whatsoever in HTML (and is thus treated as any regular character). Conversely, you'd likely need to escape &, for example (as &), which does not need escaping in JavaScript.
answered Nov 21 at 5:06
Amadan
128k13139191
Because is an escape character for JavaScript string literals (and thus needs to be escaped to specify a literal backslash); while it has no special significance whatsoever in HTML (and is thus treated as any regular character). Conversely, you'd likely need to escape &, for example (as &), which does not need escaping in JavaScript.
answered Nov 21 at 5:06
Amadan
128k13139191
edited Nov 21 at 5:17
answered Nov 21 at 5:06
Amadan
128k13139191
answered Nov 21 at 5:06
Amadan
128k13139191
answered Nov 21 at 5:06
Amadan
128k13139191
128k13139191
Thats a very interesting comment (Conversely, you'd likely need to escape &) from React point of view..did not think about it. However, considering I wrote the react function in javascript, should the javascript rule not have precedence?
– Shibasis Sengupta
Nov 21 at 5:16
I guess I got your point. The props are being passed along with HTML and not JS, so the JS rules dont apply?
– Shibasis Sengupta
Nov 21 at 5:20
"However, considering I wrote the react function in javascript!" - You did not write it in JavaScript. You wrote it in JSX, which is a mishmash of JavaScript and basically XHTML, that gets compiled to JavaScript. Inside XHTML, XHTML rules. Outside XHTML, JavaScript rules (as you noted). Also note that interpolated values inside the XHTML bits (the stuff inside curlies) again go with JavaScript rules:regex='{"^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$"}'.
– Amadan
Nov 21 at 5:23
add a comment |
Thats a very interesting comment (Conversely, you'd likely need to escape &) from React point of view..did not think about it. However, considering I wrote the react function in javascript, should the javascript rule not have precedence?
– Shibasis Sengupta
Nov 21 at 5:16
I guess I got your point. The props are being passed along with HTML and not JS, so the JS rules dont apply?
– Shibasis Sengupta
Nov 21 at 5:20
"However, considering I wrote the react function in javascript!" - You did not write it in JavaScript. You wrote it in JSX, which is a mishmash of JavaScript and basically XHTML, that gets compiled to JavaScript. Inside XHTML, XHTML rules. Outside XHTML, JavaScript rules (as you noted). Also note that interpolated values inside the XHTML bits (the stuff inside curlies) again go with JavaScript rules:regex='{"^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$"}'.
– Amadan
Nov 21 at 5:23
Thats a very interesting comment (Conversely, you'd likely need to escape &) from React point of view..did not think about it. However, considering I wrote the react function in javascript, should the javascript rule not have precedence?
– Shibasis Sengupta
Nov 21 at 5:16
Thats a very interesting comment (Conversely, you'd likely need to escape &) from React point of view..did not think about it. However, considering I wrote the react function in javascript, should the javascript rule not have precedence?
– Shibasis Sengupta
Nov 21 at 5:16
I guess I got your point. The props are being passed along with HTML and not JS, so the JS rules dont apply?
– Shibasis Sengupta
Nov 21 at 5:20
I guess I got your point. The props are being passed along with HTML and not JS, so the JS rules dont apply?
– Shibasis Sengupta
Nov 21 at 5:20
"However, considering I wrote the react function in javascript!" - You did not write it in JavaScript. You wrote it in JSX, which is a mishmash of JavaScript and basically XHTML, that gets compiled to JavaScript. Inside XHTML, XHTML rules. Outside XHTML, JavaScript rules (as you noted). Also note that interpolated values inside the XHTML bits (the stuff inside curlies) again go with JavaScript rules:
regex='{"^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$"}'.– Amadan
Nov 21 at 5:23
"However, considering I wrote the react function in javascript!" - You did not write it in JavaScript. You wrote it in JSX, which is a mishmash of JavaScript and basically XHTML, that gets compiled to JavaScript. Inside XHTML, XHTML rules. Outside XHTML, JavaScript rules (as you noted). Also note that interpolated values inside the XHTML bits (the stuff inside curlies) again go with JavaScript rules:
regex='{"^[A-Z0-9]+@[A-Z]+\.[A-Z]{2,3}$"}'.– Amadan
Nov 21 at 5:23
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405511%2fwhy-i-do-not-need-to-put-string-escape-character-while-passing-property-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
