Components Interacting

Learn how to make React components interact with one another.

Key Concepts

Review core concepts you need to learn to master this subject

Returning HTML Elements and Components

React Component File Organization

this.props

defaultProps

props

this.props.children

Binding this keyword

Call super() in the Constructor

class Header extends React.Component {
  render() {
    return (
      <div>
        <Logo />
        <h1>Codecademy</h1>
      </div>
    );
  }
}

A class component’s render() method can return any JSX, including a mix of HTML elements and custom React components.

In the example, we return a <Logo /> component and a “vanilla” HTML title.

This assumes that <Logo /> is defined elsewhere.

Components Render Other Components

Lesson 1 of 3

Portfolio projects that showcase your new skills

Stress-test your knowledge with quizzes that help commit syntax to memory