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.

Practice

1. What does the children prop represent in a React Native component?

easy

A. The content placed between the component's opening and closing tags

B. A special function to handle user input

C. A method to style the component

D. A prop that controls navigation between screens

Solution

1. Step 1: Understand the role of children prop

   The children prop holds whatever is placed inside a component's tags when used.

2. Step 2: Identify the correct description

   Only The content placed between the component's opening and closing tags correctly describes this as the content between opening and closing tags.

3. Final Answer:

   The content placed between the component's opening and closing tags -> Option A

4. Quick Check:

   children prop = content inside tags [OK]

Hint: Remember: children = content inside component tags [OK]

Common Mistakes:

• Confusing children with event handlers
• Thinking children is a styling prop
• Assuming children controls navigation

2. Which of the following is the correct way to access children inside a functional component in React Native?

easy

A. const MyComponent = ({child}) => { return {child}; }

B. const MyComponent = (props) => { return {props.children}; }

C. const MyComponent = () => { return {children}; }

D. const MyComponent = (props) => { return {props.child}; }

Solution

1. Step 1: Recall how to access children prop

   Children are accessed via props.children or by destructuring { children }.

2. Step 2: Check each option

   const MyComponent = (props) => { return {props.children}; } correctly uses props.children. Options A, B, and D use incorrect variable names or miss the props argument.

3. Final Answer:

   const MyComponent = (props) => { return <View>{props.children}</View>; } -> Option B

4. Quick Check:

   Access children with props.children [OK]

Hint: Use props.children or destructure { children } [OK]

Common Mistakes:

• Using 'child' instead of 'children'
• Not passing props as function argument
• Trying to use children without props

3. What will be rendered by this component?

const Wrapper = ({ children }) => {
  return {children};
};

const App = () => {
  return (
    
      Hello World
    
  );
};

medium

A. A syntax error because children is not defined

B. An empty View with no content

C. A Text component with no parent View

D. A View containing the text 'Hello World'

Solution

1. Step 1: Understand children usage in Wrapper

   The Wrapper component receives children and renders them inside a View.

2. Step 2: Analyze App component usage

   App passes a Text component with 'Hello World' as children to Wrapper, so Wrapper renders a View containing that Text.

3. Final Answer:

   A View containing the text 'Hello World' -> Option D

4. Quick Check:

   Children passed render inside View [OK]

Hint: Children inside Wrapper render inside View [OK]

Common Mistakes:

• Thinking children are ignored
• Confusing children with props.children syntax error
• Assuming children must be a string

4. Identify the error in this component that tries to render children:

const Container = () => {
  return {children};
};

medium

A. children is not defined because props are missing

B. View cannot contain children components

C. Missing import for View component

D. children should be a string, not JSX

Solution

1. Step 1: Check function parameters

   The component does not receive any props, so children is undefined.

2. Step 2: Understand how to fix

   To access children, the component must accept props or destructure children from props.

3. Final Answer:

   children is not defined because props are missing -> Option A

4. Quick Check:

   Must receive props to access children [OK]

Hint: Always pass props to access children [OK]

Common Mistakes:

• Forgetting to add props parameter
• Assuming children is global
• Confusing import errors with children usage

5. You want to create a reusable Card component that wraps any content passed inside it with padding and a border. Which is the best way to implement it using the children prop?

const Card = (props) => {
  return (
    
      {/* What goes here? */}
    
  );
};

hard

A. {props.content} assuming content prop holds children

B. Return only <View> without children to keep card empty

C. {props.children} to render any nested content inside the card

D. Use {props.children()} as children is a function

Solution

1. Step 1: Understand children usage for flexible content

   Children prop allows any nested content to be rendered inside the component.

2. Step 2: Choose correct syntax to render children

   Using {props.children} correctly renders nested content. Other options misuse props or assume children is a function.

3. Final Answer:

   {props.children} to render any nested content inside the card -> Option C

4. Quick Check:

   Use props.children to wrap nested content [OK]

Hint: Use {props.children} to wrap any nested content [OK]

Common Mistakes:

• Using wrong prop name like content
• Trying to call children as a function
• Not rendering children at all