Those Curly Braces in JSX

What are they?

jsx-braces

In JSX, { } is a placeholder waiting to be filled. You can put in many things, a number, a string, an object or even a function. What you can put inside is an Expression.

Since it’s an expression, it can go pretty crazy. In fact, there’s no limit of what you can put inside. As long as it’s an expression, it’ll fit in.

jsx-complex

Sometimes you can even put a JSX tag inside the { }, because JSX tags are Expressions too!

jsx-in-jsx

If you like what you are reading here, join my newsletter, which is all about React and design. See you next time!


© 2019 jimu Labs, Inc.