React.js is a component-based library which is used to develop interactive UI’s. In React we break down the complex UI into simpler components. So, to pass data from one component to another component we use something called ‘props’.

Props is short for properties. They are read-only components which must be kept pure i.e. immutable. They are always passed down from the parent to the child components.

React’s data flow between components is uni-directional (from parent to child only). Whenever we need to share data between components, we need to lift the state up to the nearest common ancestor.

In class components, props can be accessed using the ‘this’ keyword:

``` class Welcome extends React.Component { render() { return

Hello, {this.props.name}

; } }
```

In functional components, we can directly access props as function arguments:

``` function Welcome(props) { return

Hello, {props.name}

; }
```

You can also define default props for a Component:

``` function Welcome({ name = “User” }) { return

Hello, {name}

; }
```

In this case, even if you don’t provide a ‘name’ prop, the component will display “Hello, User”.

How do props work in Reactjs?

Hello, {this.props.name}

Hello, {props.name}

Hello, {name}