Props in React

In our previous chapters and examples, we were introduced to React components and we also briefly saw how data can be passed from a parent component to a child component. This is a simple implementation of props.

Props in React is a way of passing data from parent to child. Let's look at a simple example where we pass a name to a component that renders a message. Setting props in our JSX is similar to setting an attribute in XML or HTML. Here's an example of sending props to the HelloMessage component:

function App() {
  return (
  <div>
  <HelloMessage name="John" />
  </div>
);
}

The props that have been sent to a class component can be accessed using this.props. Here's an example of the HelloMessage component receiving name as a prop:

import React, { Component } from "react";
export class HelloMessage extends Component {
  render() {
   ...