What exactly is a "Prop" in React?

Question

I just started using React native on iOS to see how it feels like and I have a silly question.. I see everyone talking about "Props", whenever I read an article or a tutorial, the author uses this term a lot and it's the same in the code. For instance, in class declarations I often see constructors like :

class MyClass extends Component {

    constructor(props) {
        super(props);
        this.state = { message: '' };
    }
}

I can't find a clear explanation of what a prop is, could anyone enlighten me about that ?

Answer 1

props are the values that you pass down to your React component. So whenever you have a component you'll see something like this:

<MyComponent value1={value1} isTrue={true} />

Answer 2

In addition to the answer of Keith, below you can find the non-JSX version that uses a 'color' property.

// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

Answer 3

React Props are read-only arguments passed from one React Component to another (down the component hierarchy).

Let's say you have two components - App and List. Then, inside App we have a list with information from developers. If we wanted to pass the array to the List component, we'd do something like this (<List list={developers} />)

import React from 'react';

const App = () => {
  const developers= [
    {
      id: 1,
      name: 'Randy'
    },
    {
      id: 2,
      name: 'Tiago Peres'
    },
  ];

  return (
    <div>
      <h1>Developers in StackOverflow</h1>

      <List list={developers} />
    </div>
  );
};

const List = props =>
  props.list.map(item => (
    <div key={item.id}>
      <span>{item.name}</span>
    </div>
  ));

export default App;

This would be the result

Using this, we don't need to have too much information in the global scope.

If you want to know more about it, there's a great article from Robin Wieruch that i would suggest you to read.

---

To understand the specific case you mention, one must know some basics of React and also ECMAScript 6 (ES6). Based in content from W3Schools's React Tutorial,

• A class created with a class inheritance inherits all the methods from another class.
• To create a class inheritance we use the extends keyword.
• You're creating a class named MyClass which will inherit the methods from the Component class.
• The properties of a class are assigned inside a constructor() method
• The constructor function is called automatically when the object is initialized.
• The super() method refers to the parent class and so executes the parent component's constructor function.
• If the component has a constructor function, the props should always be passed to the constructor and also to the React.Component via the super() method.
• super(props) would call the Component constructor passing in props as the argument.
• While most likely you could just use super(), using super(props) ensures this.props is set even before the constructor exits.
• Even though in your case the state object has only message property, you can have as many as you like.
• You can use this.state.message anywhere in the component.

Answer 4

Props : Props is nothing but property of component and react component is nothing but a JavaScript function. Props are immutable. You can pass props between components.You can pass props from parent component to child component directly. For passing from child to parent you need use concept of lifting up states.

class Parent extends React.Component{
  render()
  {`enter code here`
     return(
        <div>
            <Child name = {"Sara"}/>
        </div>
      );
  }
}

class Child extends React.Component{
{
    render(){
      return(
         <div>
              {this.props.name}
        </div>
      );
     }
}