props

props can actually be any name you like, but by convention, people usually use the word props. props is a way that the parent component pass values to a child component. let's assume we have a child component like this:

import React from 'react';

const person = (props) => {
    return (
        <div>
            <p>I am a {props.name}, and I am {props.age} years old</p>
            <p>{props.children}</p>
        </div>)
}
export default person

We can see that we are using props.name, props.age, and props.children. When the value is updated, they UI will also be updated.

Here is how we use this child component.

.
.
.
import Person from './Person/Person';
.
.
.
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Testing</h1>
        <Person name={"Name"} age={12}>This is a demo</Person>
      </div >
    )
  }
}

export default App;

we can see that we have name, and age properties inside the Person opening tag. The children part is what between the Person open and close tags. For passing values or variables inside the opening tag. we use {} and put the value/var inside.