Self-closing

Learn self-closing tags and empty components.

Self-closing tags

If a tag will not contain anything, you write it in self-closing form. You do this by adding a / at the end, like <View />.

The self-closing form replaces an empty <View></View> pair; it is shorter and easier to read.

In JSX, any tag can be self-closing; just do not put children inside.

Self-closing tags are a shorthand for an empty component. For example, you can write <View /> as a placeholder; it draws an empty box.

In JSX, any tag can be self-closing; but if a tag has children (other tags or text inside), self-closing cannot be used.

For an empty View write <View />; for a filled View write <View>...</View>.

Write an App component. Inside a <View> first place an empty <Text /> (self-closing), then <Text>Hello</Text>.

Show example solution

function App() {
  return (
    <View>
      <Text />
      <Text>Hello</Text>
    </View>
  );
}

Self-closing Text

<View>
  ____
  <Text>Filled</Text>
</View>

Show answer

<View>
  <Text />
  <Text>Filled</Text>
</View>