ReactJs | Can not read property 'props' of undefined

Question

I have app.js as the parent and uploadlist.js as the child. I am passing "userid" which is defined in app.js to uploadlist.js. This is my try:

app.js :

export default class App extends Component {

  state = {

    userrole : '',
    custid   : ''

  };

componentDidMount() {

  if(localStorage.login)
  {
    const currentuser     = JSON.parse(atob(localStorage.login.split(".")[1])); 
    this.setState( {userrole: currentuser.role });
    this.setState( {custid: currentuser.id });
    
  }

}

render() {

if(this.state.userrole === "Customer"){
  const userid=this.state.custid;
  console.log(userid); //This properly returns the userid in console.
return (
//some code
<Route path="/Uploadlist" render={props => <UploadList userid={props.match.params.userid} />}/>

uploadlist.js:

export default function Uploadlist() {
const userid = this.props.userid;
    console.log(userid);

This returns "TypeError: Cannot read property 'props' of undefined" error. How can I solve this?

@AmirHossein I tried console.log(props.match.params) in App.js. It returns "props is not defined. — Devindi Siwurathna
– Devindi Siwurathna, Commented Jun 7, 2021 at 20:07

CertainPerformance · Accepted Answer · 2021-06-07 15:12:08Z

2

Uploadlist is a functional component. It doesn't have this - rather, its props will be in the first parameter passed to the function, in the shape of an object.

export default function Uploadlist({ userid }) {
  console.log(userid);

or use a class component to reference this.props

export default class Uploadlist() {
  render() {
    console.log(this.props.userid);

answered Jun 7, 2021 at 15:12

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Devindi Siwurathna Over a year ago

I tried the first method as I want it as a functional component. But it returns 'undefined'. Why is that? @certainPerformance

CertainPerformance Over a year ago

If <UploadList userid={props.match.params.userid} and export default function Uploadlist({ userid }) { logs undefined for userid, then the prop you're passing is undefined - the problem is in the parent app.js, but there isn't enough code to see what the problem might be there - try some debugging in the parent component.

Devindi Siwurathna Over a year ago

Thank you. I couldn't still configure the issue in app.js hence I updated the question with app.js code. can you have a look in it?

Amir Hossein Over a year ago

the issue is because you don't send the userId to the upload list component <UploadList custid={props.match.params.custid} />

Devindi Siwurathna Over a year ago

@AmirHossein Sorry it is a mistake I have done when editing this question. I have <UploadList custid={props.match.params.custid} /> in my app.js. But it doesn't working.

Shyam · Accepted Answer · 2021-06-07 15:22:28Z

when you want to pass props to the component rendered via Route use render prop instead of component .

Change your component as below

<Route path="/Uploadlist" render={props => <UploadList userid={props.match.params.userid} />}/>

Also you are trying to access props.match.params.userid you won't have the userId here because you are rendering this component for the path /Uploadlist . But if the props.match is from a parent component which renders this Route then to avoid name collision change the name of your props as

render={routeProps => <UploadList userid={props.match.params.userid} {...routeProps} />}

Now you can access the props in your component as

export default function Uploadlist({ userid }) {
  console.log(userid);

Refer

Route Render Function

Route component Prop

kanuos · Accepted Answer · 2021-06-07 15:22:47Z

0

UploadList is a functional component. Your route passes values top the component but when you defined UploadList, you did not accept any props as parameter.

It should be

function UploadList(props) {
.....
}
export default UploadList;

Or like @certainperformance answered, you could even use ES5 de-structuring to destructure the props parameter.

If you want to use 'this' use a class based component but that's a bit archaic and functional components are the best way to go for it these days

answered Jun 7, 2021 at 15:22

kanuos

1,2131 gold badge11 silver badges18 bronze badges

1 Comment

Devindi Siwurathna Over a year ago

Hello. I had tried this way also. I got the above mentioned typeError when using this method also.

Collectives™ on Stack Overflow

ReactJs | Can not read property 'props' of undefined

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related