Components in Components

We can include components within other components.

Example

Embed the Car component within the Garage component.

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Components in Files

React emphasizes code reuse, so it’s beneficial to place some components in separate files. To do this, create a new file with a .js extension and include the component code. Ensure the file begins with importing React (as usual) and ends with export default Car;.

Example

Here is the new file, named Car.js.

Example

This is the new file, called Car.js.

import React from 'react';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

export default Car;

To use the Car component, you need to import the Car.js file into your application.

Example

Now that we’ve imported the Car.js file into the application, we can use the Car component as if it were created directly in this file.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

React Class Component State

React Class components include a built-in state object, which we used earlier in the component constructor section. The state object stores property values specific to the component.

When the state object updates, the component re-renders.

Creating the state Object

The state object is initialized within the constructor.

Example

Define the state object within the constructor method.

class Car extends React.Component {
  constructor(props) {
    super(props);
  this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

The state object can include as many properties as needed.

Example

Define all the properties required by your component.

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Using the state Object

Access the state object anywhere in the component using the this.state.propertyName syntax.

Example:

Access the state object within the render() method.

Changing the state Object

To update a value in the state object, use the this.setState() method. When a value in the state object is modified, the component will re-render, reflecting the changes in the output based on the new value(s).

Example:

Add a button with an onClick event that will update the color property.

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}