# Passing Data to Components

**URL:** <https://forum.codewithmosh.com/t/passing-data-to-components/803>\
**Category:** React\
**Created:** [November 20, 2020, 6:10pm UTC](https://forum.codewithmosh.com/t/passing-data-to-components/803 "2020-11-20T18:10:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bebo7](https://avatars.discourse-cdn.com/v4/letter/b/fbc32d/32.png) [@bebo7](https://forum.codewithmosh.com/u/bebo7)\
**Post date:** [November 20, 2020, 6:10pm UTC](https://forum.codewithmosh.com/t/passing-data-to-components/803/1 "2020-11-20T18:10:29Z")

</div>

I’m completely incapable of mimicing Mosh in the Passing data to Components episode (E.3 of Composing Components.

Everything exept  
state = {  
value: this.props.value  
}  
I get an error that says: Cannot read property ‘value’ of undefined

I’ve checked the value attribute of but there’s nothing wrong.

Did something change in react or something?

---

<div class="post-metadata">

**Author:** ![bebo7](https://avatars.discourse-cdn.com/v4/letter/b/fbc32d/32.png) [@bebo7](https://forum.codewithmosh.com/u/bebo7)\
**Post date:** [November 20, 2020, 7:45pm UTC](https://forum.codewithmosh.com/t/passing-data-to-components/803/2 "2020-11-20T19:45:15Z")

</div>

It suddenly worked and I have no idea why

---

<div class="post-metadata">

**Author:** ![Augustine\_Awuori](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/augustine_awuori/32/873_2.png) [@Augustine\_Awuori](https://forum.codewithmosh.com/u/Augustine_Awuori)\
**Post date:** [February 6, 2021, 5:28pm UTC](https://forum.codewithmosh.com/t/passing-data-to-components/803/3 "2021-02-06T17:28:41Z")

</div>

Ensure that you have passed the value prop properly

---

<div class="post-metadata">

**Author:** ![ChaitraNadig](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@ChaitraNadig](https://forum.codewithmosh.com/u/ChaitraNadig)\
**Post date:** [April 14, 2021, 11:58am UTC](https://forum.codewithmosh.com/t/passing-data-to-components/803/4 "2021-04-14T11:58:51Z")

</div>

Make the following change in the constructor and it will work

```
state = {
    value: this.props.value
  };

  constructor(props){
    super(props)
    this.handleIncrement = this.handleIncrement.bind(this);
  }
```

---

<div class="post-metadata">

**Author:** ![JoeB](https://avatars.discourse-cdn.com/v4/letter/j/f19dbf/32.png) [@JoeB](https://forum.codewithmosh.com/u/JoeB)\
**Post date:** [November 3, 2022, 1:53pm UTC](https://forum.codewithmosh.com/t/passing-data-to-components/803/5 "2022-11-03T13:53:51Z")

</div>

The solution by @ChaitraNadig works, passing _props_ in two places, (1) as a parameter in the _constructor_ function and (2) as an argument when calling _super_.

Note that a lot of users might not have this problem because in an earlier lecture, there was an issue with ‘this’ being undefined in a method named ‘handleIncrement’, and Mosh provides two solutions. If you use the solution that involves the bind method in _constructor_ then you’ll get this error described above. If however you use the solution that assigns ‘handleIncrement’ to an arrow function, then the above error doesn’t occur.