Dev

By Carlos Santana on
Reading time: 3 minutes

Props-M26oL.png

If you have been reading my last posts so far you are getting familiar with React components, but there is more than just render static HTML. Like any application, we need to be able to send data (via props) to different elements. In this post, we are going to create some new component: Header, Content, and Footer (we will group these components into a folder called layout), and we will send some props (as attributes and as children) and then validate them using PropTypes.

Before you continue, you have to install the package prop-types:

npm install prop-types

PropTypes was initially released as part of the React core module and is commonly used with React components. PropTypes is used to document the intended types of properties passed to components. React will check the props passed to your components against those definitions, and it will send a warning in development if they don't match.

Creating our layout components

The first layout component we need to create is the Header: 

import React, { Component } from 'react';
import { string } from 'prop-types';

class Header extends Component {
  // Here you can define your PropTypes.
  static propTypes = {
    title: string.isRequired,
    url: string
  };

  render() {
    const {
      title = 'My First React App',
      url = 'https://www.dev.education'
    } = this.props;

    return (
      <header className="App-header">
        <h1>
          <a href={url}>{title}</a>
        </h1>
      </header>
    );
  }
}

export default Header;
File: src/shared/components/layout/Header.js

The static propTypes property is an object where you need to define the types of props you will pass. The existing types are: array, book, func, number, object, string, and symbol are primitive types, but there are also special types such as node, element, instanceOf, oneOf, oneOfType, arrayOf, objectOf, shape and any.

There is an optional property called isRequired that can be added to any type if the prop must be required and will produce a React warning if is not defined.

After we created our Home component we need to import it and render it into our App.js file:

import React, { Component } from 'react';

// Components
import Header from '../shared/components/layout/Header';
import Home from './Home/Home';

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header title="DEV Education" />
        <Home />
      </div>
    );
  }
}

export default App;
File: src/components/App.js

TIP: Don't get confused with the <Header /> component, it is not the same as the <header> tag from HTML5, that's why in React is recommended to use capitalized letters in the class names.

All the properties passed to our components are contained in this.props. You may have noticed that we are only sending the title prop because it is the only one that is required. The url prop is optional and also has a default value in the destructuring (https://www.dev.education). If we don't pass the title prop, even if we have a default value (My First React App) in the destructuring we are going to get a warning like this:

 

ReactWarning-QP4uV.png

Creating the Footer component

We will create a Footer component as well; this is the code: 

import React, { Component } from 'react';

class Footer extends Component {
  render() {
    return (
      <footer>&copy; DEV Education {(new Date()).getFullYear()}</footer>
    );
  }
}

export default Footer;
File: src/shared/components/layout/Footer.js

Creating the Content component

So far, we only have passed props as attributes (with self-closed components like <Component />), but there is another way to pass props as children (<Component>Children Content</Component>). Let's create a Content component and send our Home component as a child of this component:

import React, { Component } from 'react';
import { element } from 'prop-types';

class Content extends Component {
  static propTypes = {
    children: element.isRequired 
  };

  render() {
    const { children } = this.props;

    return (
      <main>
        {children}
      </main>
    );
  }
}

export default Content;
File: src/shared/components/layout/Content.js

With all these changes, our App.js file should now look like this:

import React, { Component } from 'react';

// Layout Components
import Header from '../shared/components/layout/Header';
import Content from '../shared/components/layout/Content';
import Footer from '../shared/components/layout/Footer';

// Components
import Home from './Home/Home';

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header title="DEV Education" />

        <Content>
          <Home />
        </Content>

        <Footer />
      </div>
    );
  }
}

export default App;
File: src/components/App.js

I also did some minor changes to App.css to affect some styles:

Only members can see all the codes
You can Login or Sign Up

File: src/components/App.css

PropTypes are important

The PropTypes validations are very important for developers because they force us to define which type of prop we are going to receive in our components and validate whether some of them are required or not.

If you followed all the steps correctly, you should see something like this:

HomeApp-y7OR7.png

As you can see, there are many ways to send props to components. There are more ways to receive props, for example by using Redux (through a container) or with React Router, but those are topics that I'm going to cover in the next posts.

avatarLeave a comment

Your comment

Only members can comment. You can Login or Sign Up