Javascript Curly Braces Around Parameters

Question

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?

Because it's not receiving a simple string value, it's receiving an object with a `headerText` property. Since it's a React component that object is the `props` parameter. That's just how React works. The `formatName` function isn't a component; it also receives an object, and could be written `formatName({ firstName, lastName })` and you'd drop the `user.` inside the function. — Dave Newton, Oct 25 '21 at 16:54
You won't get _syntax_ errors if you remove the destructuring braces, it's still valid JS(X), but at runtime `headerText` will then be the whole props object. — jonrsharpe, Oct 25 '21 at 17:00
yes, in the first example there are two things. First, you are deconstructing an object as Dave Newton outlines called headertext. Second the return function supplies JSX and here you want to insert a variable and this requires curly braces to do that. In the second code snippet, this is just a logical function where user does not need to be deconstructed from anything and then there is no JSX returned so the variables do not at this stage need to be encased in curly brakets for JSX delivery. — David White, Oct 25 '21 at 17:01
is the format name function not considered a react component because it does not return the html-like syntax? And are all parameters that are passed to react components considered objects? — ikreie, Oct 25 '21 at 17:33

Nathan Waddell · Answer 1 · 2021-10-25T18:22:44.467

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

score 0 · Accepted Answer · answered Oct 25 '21 at 18:18

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"/>
     )}
    </>
   )
}

Javascript Curly Braces Around Parameters

2 Answers2