Stellar Code

Full-stack Web Development with JavaScript (MERN stack)

React Props: Data flow, validation & children

Front End

In React, Props are short for ‘Properties’. Props allow dynamic flow of data between components of a React app.

 

Data flow

As mentioned before, there are only two types of components in React: a Parent component & a Child component. Child components depend on their parent component to pass down dynamic data, which the child should receive. The data that can be passed down are typical ones such as string, number, function, object etc. To illustrate this relationship, consider the following code snippet:

class ProductList extends React.Component {
      render() {
           return (
	Product List
	<Product name="headphones" price={5000} />
                   )
          }	
}

This is a parent component called ‘ProductList’ in which we have composed a child component called ‘Product’. Props in React are typically passed as attributes, similar to how HTML attributes are written inside the self enclosing tag of a component. The self-enclosing tag is <Product name="headphones" price={5000} />

As we can see above, we pass strings between " " quotation marks while other props such as functions, numbers, objects should be passed between { } curly braces. Whatever we pass down as props from a parent to a child component is made available for use at the child component level, in a props object.

class Product extends React.Component {
        render() {
             return (
	<h1>{this.props.name}</h1>
	<span>Amount is {this.props.price}</span>
                     )
                }
}

The child component will render as shown:

Note: The ‘this’ keyword in classy components like we’ve used above refers to the component itself. So, this.props is like saying inside this component, access its props then access whatever (using the dot notation). This is how data flow works in React components using props.

 

Prop validation

Prop validation in React is used in the development mode of an app to make sure we are creating and passing down props of a specified data type to components. It can also be used to make sure a prop must be passed else our console will return an error. It helps developers especially when working on an app together.

Using the Product component (the child component) above, I would validate that component by writing

Product.propTypes {
	name: React.PropTypes.string.isRequired,
	price: React.PropTypes.number
}

propTypes is a behind-the-scenes object available to every component we create. Prop validation involves writing the name of the prop you want to validate then writing the specification to be validated by, after a column as shown above. Read the documentation for more details.

You could also define defaultProps for a component to default to a value if no prop is passed down. I won’t discuss that now.

 

props.children

In React, there are two ways to declare a component after it has been created. One way is with self enclosing tags <SomeComponent />.  Another way is by using a matching closing tag <SomeComponent></SomeComponent>.

props.children accesses the content in-between the opening and closing tag of a component. Also, it provides us a way to insert content in such a parent element.


Also published on Medium.


Emmanuel Yusufu

Web Developer. Learning enthusiast.