What's the difference between passing data this way to properties in React?
If you want to pass string
as a prop, you can wrap it with ''
or ""
.
If you want to pass an object, boolean, integer, float, variable, etc. then you can use curly braces {}
Example:
<Header headerText={'Authentication'} />
<Header headerText={"Authentication"} />
<Header headerText="Authentication" />
<Header headerText='Authentication' />
All of the above applies to strings.
If you want to pass some other type as props, you can use {}
Example:
passing the variable as prop
const auth = Authentication
<Header headerText={auth} />
passing through boolean as prop
<Header headerText={false} />
<Header headerText={true} />
passing an integer or float as a prop
<Header headerText={1} />
<Header headerText={1.0} />
source to share
No difference in result for your example. The only difference is that syntactically, the former can accept a variable if needed, whereas the latter will always coerce the string.
So this is possible with the first, not the second:
var auth = 'Authentication'
<Header headerText={auth} />
source to share