Component composition in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render the

component inside .

React

function Header() {
  return <h1>Welcome!</h1>;
}

function App() {
  return (
    <div>
      [1]
    </div>
  );
}

Drag options to blanks, or click blank then click option'

A<Header />

B<header />

CHeader()

D<Header></Header>

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase tags like

which is a HTML tag, not the React component.

Calling Header() directly instead of using JSX syntax.

Use

to include the Header component inside App. It is the correct JSX syntax for rendering a component.

2fill in blank

medium

Complete the code to pass a 'title' prop from to

and display it.

React

function Header(props) {
  return <h1>[1]</h1>;
}

function App() {
  return <Header title="Hello!" />;
}

Drag options to blanks, or click blank then click option'

Aprops.title

Btitle

Cthis.props.title

Dprops['title']

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'title' directly without 'props.' prefix.

Using 'this.props' in a functional component.

Use props.title to access the 'title' prop inside the Header component.

3fill in blank

hard

Fix the error in the code to correctly render children inside <Wrapper>.

React

function Wrapper(props) {
  return <div>[1]</div>;
}

function App() {
  return (
    <Wrapper>
      <p>Content</p>
    </Wrapper>
  );
}

Drag options to blanks, or click blank then click option'

Aprops.child

Bprops.children

Cchildren

Dthis.props.children

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'props.child' which does not exist.

Using 'this.props.children' in a functional component.

Use props.children to render the nested content inside the Wrapper component.

4fill in blank

hard

Fill both blanks to create a component that wraps content with a section and a class.

React

function SectionWrapper(props) {
  return <section className=[1]>[2]</section>;
}

function App() {
  return (
    <SectionWrapper className="highlight">
      <p>Important info</p>
    </SectionWrapper>
  );
}

Drag options to blanks, or click blank then click option'

Aprops.className

Bprops.children

CclassName

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'className' without 'props.' prefix.

Using 'children' without 'props.' prefix.

Use props.className for the class attribute and props.children to render nested content.

5fill in blank

hard

Fill all three blanks to create a component that renders a list of items passed as props.

React

function ItemList({ [1], [2] }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key=[3]>{item}</li>
      ))}
    </ul>
  );
}

function App() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return <ItemList items={items} />;
}

Drag options to blanks, or click blank then click option'

Aitems

Bindex

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Not destructuring 'items' from props.

Using 'item' as key instead of 'index'.

Destructure 'items' and 'index' from props and use 'index' as the key in the list.