I've been using this.props and props interchangeably, and for the most part, there doesn't seem to be a major difference between them (as far as I can tell).

However, I've been running into issues lately that make me think that when and why one is used over the other matters.

This is where I'm currently using them interchangeably:

  constructor(props, context) {
    super(props, context);
    this.data    = props.card.data;
    this.dataLength = this.props.card.data.length;
  }

What's the difference and when do you use one over the other, and where? Thanks!

I've been using this.props and props interchangeably, and for the most part, there doesn't seem to be a major difference between them (as far as I can tell).

However, I've been running into issues lately that make me think that when and why one is used over the other matters.

This is where I'm currently using them interchangeably:

  constructor(props, context) {
    super(props, context);
    this.data    = props.card.data;
    this.dataLength = this.props.card.data.length;
  }

What's the difference and when do you use one over the other, and where? Thanks!

• javascript
• reactjs

Share Improve this question Follow edited Jun 27, 2016 at 18:19 reectrix asked Jun 27, 2016 at 18:12 reectrixreectrix 8,6592121 gold badges6060 silver badges8484 bronze badges 5

• can you show one example when you are using this.props and props interchangeably? – nuway Commented Jun 27, 2016 at 18:14
• Could you show an example where you would say this.props is different from props? – Elod Szopos Commented Jun 27, 2016 at 18:16
• I updated the question to include it – reectrix Commented Jun 27, 2016 at 18:19
• you can use props because you are inside a constructor and props are passed in as an argument. When outside of constructor you would need to refer to the instance (this) to access it's props – nuway Commented Jun 27, 2016 at 18:21
• If the props are passed to the function you can use directly "props", if not use "this.props". – Parameshwar Ande Commented Jan 18, 2019 at 6:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

It all depends on the type of ponent you are using.

const StatelessComponent = (props) => {
    return <div>{props.something}</div>;
}

class SomeComponent extends Component {
    constructor(props){
        super(props)
    }
    render() {
        return <div>{this.props.something}</div>;
    }
}

Here you will notice that in the stateless ponent it is just a regular function without any this context. The props are passed to the function so we already have access to it.
When you have a class you have a this context that the props live on.
In the constructor of a class the props are passed to the class constructor. So in the context of that constructor function props is passed as an argument and is a local variable

I would remend you stick to a pattern, when you have props passed as an argument to a function you use props when you are in other methods of a react class you use this.props. That is how it was intended to be used. Also there is something to be said for consistency, so whether you choose one or the other stick with that pattern. It can be confusing if you don't follow a pattern / keep things consistent.

Only in the constructor of React ES2015 ponents (non-function ponents) will you be able to refer to props as it is passed into the constructor. If you do this.props === props in the constructor, it will evaluate to true.

However in React, you can only use this.props after you call super(props). This is part of the ES2015 Class spec.

For simplicity, I usually just use solely props within the constructor, and this.props within the ponent lifecycle methods and in render.

In simple terms:

• 1.props.data is used in functional ponents 2.this.props.data is used in Class ponents

copy the code and run it in "stackblitz" ->https://stackblitz./edit/react-3wr8jb

the following code shows usage of both class and functional ponents with props.data and this.props.data

import React, { Component } from 'react';
import { render } from 'react-dom';

//=================PROPS=======================
//Both Class and Functional ponents have "properties" ie props
//properties are immutable->fixed->cant be changed

//=================================================
//props.data in functional ponents
function A1(props)
{
  return <h2>functional ponent->props.data:{props.data}</h2>
}
//===============================================
//this.props.data in class ponents
class A2 extends React.Component{
  render()
  {
    return<h2>class ponent->this.props.data:{this.props.data}</h2>
  }
}
//===================================================
var element1=
<div>
<hr/>
//data from class and functional ponent
<A1 data="Sample data" />
<A2 data="Sample data"></A2>
<hr />
</div>


render(element1, document.getElementById('root'));