Props: a keyword in React that stands for properties and is used to pass data from one component to another (from a Parent to a Child).

If you are familiar with React, then you are familiar with props, but for those who are new to React, the concept of props can be a bit difficult to understand at first. Props is a special keyword in React, which stands for properties and is used to pass data from one component to another. An important feature to not is that props are passed in a uni-directional flow ~ meaning in one way from parent to child. Props data is also read-only meaning that the data that comes from the Parent Component should not be changed by its Child Component. Passing props from a Parent Component to a Child is very simple, much like passing arguments to a function.

In the code snippet below, you can see an example of a Parent Component passing information to a Child Component via props.

class ParentComponent extends Component {
render() {
return(
<ChildComponent name="First Child" />
);
}
}

React Props are basically like function arguments in JavaScript and attributes in HTML and they are the main mechanism for component communication. Props do not only have to contain strings, they can take any native JavaScript type(arrays, boolean values, objects, functions, etc…).

Full Stack Developer with experience in JavaScript, TypeScript, React and Redux. My main experience is in working with APIs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store