Using JavaScript expressions
As you saw in the preceding section, JSX has a special syntax that allows you to embed JavaScript expressions. Any time React renders JSX content, expressions in the markup are evaluated. This feature is at the heart of JSX’s dynamism; it enables the content and attributes of your components to change in response to different data or state conditions. Each time React renders or re-renders JSX content, these embedded expressions are evaluated, allowing the displayed UI to reflect current data and state. You’ll also learn how to map collections of data to JSX elements.
Dynamic property values and text
Some HTML property or text values are static, meaning that they don’t change as JSX markup is re-rendered. Other values, the values of properties or text, are based on data that is found elsewhere in the application. Remember, React is just the view layer. Let’s look at an example so that you can get a feel for what the JavaScript...