I'm learning react and javascript right now and am struggling to understand why curly braces are required when passing a simple string into a react functional component like so:
function Editor({ headerText }) {
return (
<div className="title">
<span>{headerText}</span>
</div>
);
}
export default Editor;
I understand the concept of object destructuring. However, the headertext parameter is just receiving a basic string. Why do I get syntax errors when trying to remove the curly braces if headerText is just a basic string, so it shouldn't even need the curly braces?
In fact, the react docs have a function similar to this that doesn't even use curly braces:
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
So why is it that my code snippet requires curly braces when the parameter is receiving a simple string value?
It requires the curly braces due to the fact that headerText is a property name on the props object. If you write it as <span>headerText</span> it will render headerText as a literal string rather than the value passed as props by <Editor headerText='text value' />
note: rendering a string without quotes is technically a feature of babel and not React but React comes with babel by default, I believe if you didn't use babel, it would just be invalid javascript
When you use <span>{headerText}</span> this is actually grabbing the variable headerText and rendering that value in the span tag.
Here is a very simple example of the difference in the two. Just uncomment the second return and comment the first to see them change.
https://codesandbox.io/s/friendly-babycat-rqzo9?file=/src/Test.js
Why curly braces are required when passing a simple string into a react functional component
This is by design.
Consider when Editor is invoked in another component:
function MyComponent() {
return(
<Editor headerText="Header"/>
)
}
When React calls Editor function, it passes in an object, known as props.
That object will have the single string headerText and the value that was passed when invoked, however your component has no guarantee that the passed in props ONLY has that singular value.
Consider if your component is used like so
function MyAwesomerComponent() {
return(
<>
{[1,2,3,4,5].map(i=>
<Editor key={i} env="production" headerText="Header"/>
)}
</>
)
}