Children prop in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this component render?

Consider this React Native component using the children prop. What will be displayed on the screen?

React Native

const Box = ({ children }) => {
  return (
    <View style={{ padding: 10, backgroundColor: '#eee' }}>
      {children}
    </View>
  );
};

const App = () => {
  return (
    <Box>
      <Text>Hello</Text>
      <Text>World</Text>
    </Box>
  );
};

A Only one Text component showing 'HelloWorld' concatenated.

B Two Text components stacked vertically showing 'Hello' and 'World'.

C An error because multiple children are not allowed.

D Nothing is rendered because children prop is ignored.

💡 Hint

Remember that children can be multiple React elements and are rendered inside the parent.

The Box component renders its children inside a View. Since two Text components are passed as children, both appear stacked vertically.

🧠 Conceptual

intermediate

What type is the children prop in React Native?

In React Native, what is the correct type of the children prop when defining a functional component?

A A boolean indicating if children exist.

B Only a string value.

C A number representing the count of child elements.

D A single React element or an array of React elements.

💡 Hint

Think about what JSX elements you can pass between component tags.

The children prop can be a single React element, multiple elements as an array, or even null/undefined if no children are passed.

❓ lifecycle

advanced

When are children rendered in React Native components?

At what point in the component lifecycle are the children props rendered inside a React Native functional component?

A During the render phase, when the component function is called.

B Only after the componentDidMount lifecycle method.

C Before the component function is called.

D After the component unmounts.

💡 Hint

Functional components render children as part of their return JSX.

In functional components, children are rendered during the render phase when the component function executes and returns JSX.

📝 Syntax

advanced

Which code correctly passes children to a custom component?

Choose the correct way to pass children to a custom React Native component named Container.

React Native

const Container = ({ children }) => <View>{children}</View>;

A <Container children={<Text>Hi</Text>} />

B <Container><Text>Hi</Text></Text></Container>

C <Container><Text>Hi</Text></Container>

D <Container>{Text('Hi')}</Container>

💡 Hint

Children are passed between opening and closing tags, not as a prop named children.

Option C correctly uses JSX children syntax. Option C passes children as a prop but is less common and can cause issues. Option C is invalid JSX. Option C has mismatched tags causing syntax error.

🔧 Debug

expert

Why does this component not render its children?

Given the code below, why are the children not visible on screen?

React Native

const Wrapper = ({ children }) => {
  return <View />;
};

const App = () => {
  return (
    <Wrapper>
      <Text>Hidden</Text>
    </Wrapper>
  );
};

A Wrapper does not render the children inside its View.

B Text component is invalid inside Wrapper.

C Children prop is undefined by default.

D View component cannot have children.

💡 Hint

Check what Wrapper returns in its JSX.

Wrapper returns an empty View without including {children}, so children are not rendered.