Summary - JSX

Combine expressions, nested components and conditional rendering to write a profile card.

Summary - JSX

In this group you learned what JSX is, how to embed expressions in curly braces, the nested component tree, self-closing tags, and conditional rendering methods.

You can now compute and show variables in a component's return, and display different text based on conditions.

Let us combine all these concepts in a single app.

Exercise Expression and nesting

Define a variable productName (const productName = 'Coffee';). The App component should return an outer <View> containing a second <View>, and inside that <Text>Item: {productName}</Text>.

Show example solution

const productName = 'Coffee';

function App() {
  return (
    <View>
      <View>
        <Text>Item: {productName}</Text>
      </View>
    </View>
  );
}

Exercise Conditional welcome

Define a variable isLoggedIn (const isLoggedIn = false;). The App component should use a ternary inside a <View>: if true show <Text>Welcome</Text>, if false show <Text>Please sign in</Text>.

Show example solution

const isLoggedIn = false;

function App() {
  return (
    <View>
      {isLoggedIn ? <Text>Welcome</Text> : <Text>Please sign in</Text>}
    </View>
  );
}

Test yourself

Which is valid JSX?
- <view></view>
- <View><Text></View></Text>
- <View><Text /></View>
- <View text=hello />
Show answer

<View><Text /></View> — Self-closing Text is used correctly inside View.
Match the JSX tools

{ }

Embed expression
<View />

Self-closing
&&

Conditional and
? :

Ternary

Next lesson: Functional components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies