An essential feature of React is passing the properties to the child components. These can be anything from basic strings to numbers, but also complete components. We have already seen all of the scenarios in our application.

Developers that are new to your code base need to read through all of the components and identify which properties they can accept.

React offers a way to describe properties from within each component. Documenting the properties of your components makes it easier for other developers to understand your React components.

We will take a look at how to do this with an example in our Post component.

There are two React features that we did have covered yet, as follows:

• If your components have optional parameters, it can make sense to have default properties in the first place. To do this, you can specify defaultProps as a static property, in the same way as with the state initializers.
• The important part is the propTypes field, which you can fill for all of your components with the custom properties that they accept.

A new package is required to define the property types, as follows:

npm install --save prop-types

This package includes everything that we need to set up our property definitions.

Now, open your Post component's index.js file. We need to import the new package at the top of the Post component's index.js file:

import PropTypes from 'prop-types';

Next, we will add the new field to our component, above the state initializers:

static propTypes = {
  /** Object containing the complete post. */
  post: PropTypes.object.isRequired,
}

The preceding code should help everyone to understand your component a bit better. Every developer should know that a post object is required for this component to work.

The PropTypes package offers various types that we can use. You can access each type with PropTypes.X. If it is a required property, you can append the word isRequired in the same way as in the preceding code.

Not only does React now throw an error inside of our console when the property does not exist, but React Styleguidist is also able to show which properties are needed, as you can see in the following screenshot:

However, what is a post object? What kind of fields does it include?

The best way to document a post object is to define which properties a post should include, at least for this specific component. Replace the property definition, as follows:

static propTypes = {
  /** Object containing the complete post. */
  post: PropTypes.shape({
    id: PropTypes.number.isRequired,
    text: PropTypes.string.isRequired,
    user: PropTypes.shape({
      avatar: PropTypes.string.isRequired,
      username: PropTypes.string.isRequired,
    }).isRequired
  }).isRequired,
}

Here, we use the shape function. It allows you to hand over a list of fields that the object contains. Each of those is given a type from the PropTypes package.

The output from React Styleguidist now looks like the following screenshot:

All of the fields that we specified are listed separately. At the time of writing this book, React Styleguidist does not offer a recursive view of all properties. As you can see, the user object inside of the post object is not listed with its properties, but it is only listed as a second shape. If you need this feature, you can, of course, implement it yourself, and send a pull request on the official GitHub repo, or switch to another tool.

One last great feature of React Styleguidist is that you can enter examples for every component. You can also use markdown to add some more descriptions.

For our Post component, we need to create an index.md file, next to the index.js file in the post folder. React Styleguidist proposes creating either a Readme.md or Post.md file, but those did not work for me. The index.md file should look as follows:

Post example:

```js
  const post = {
    id: 3,
    text: "This is a test post!",
    user: {
      avatar: "/uploads/avatar1.png",
      username: "Test User"
    }
  };

  <Post key={post.id} post={post} />
```

React Styleguidist automatically rerenders the documentation and generates the following output:

Now, you can see why it was useful to use the CSS style. Not only can React Styleguidist document the code, but it can also execute it within the documentation. Like in the preceding code, providing the correct properties inside of the post object enables us to see how the component should look, including the correct styling.

This example shows how reusable our Post component is, since it is usable without having to run the Apollo query. The drop-down component is not working, though, because the whole application setup is incorrect, including the required Apollo Client.

The basics should be clear by now. Continue to read up on this topic, because there are more things to learn.