TypeError: Cannot read property 'props' of undefined react

Question

I am new to react js and following react code giving me this error
"TypeError: Cannot read property 'props' of undefined at Button (D:\my-app.next\server\static\PqudrDXAzXfiQCJ2zK-7F\pages\index.js:408:59)."

please assist me to solve this, thank you.

here is my index.js

import React, { Component } from 'react';
import Link from 'next/link';
import Head from '../components/head';
import Nav from '../components/nav';
import Button from '../components/Button';
export default () => (
<div>
<Head title="Home" />
<Nav />
<Button text="Demo Button" />
</div>
);

and here is my Button.js file

import React from 'react';
import './button.css';
import { string } from 'prop-types';

const Button = (props) => (
<button>{ props.text } </button>
);
Button.propTypes = {
text: string
 };

export default Button;

you should return you JSX. i.e. return ( <button>.... ), and return (<div><Head... — Tikkes
hi @tikkes, thanks for replying. can you please tell me how should return statement be use in this case. — Mahi Gunjal
It is not necessary as in arrow functions if you omit curly brackets you return the following statement. — radulle

radulle radulle · Accepted Answer · 2020-02-21T07:48:33

Please check this working example:

import React from "react";
import { string } from "prop-types";
const Button = props => <button> {props.text} </button>;
Button.propTypes = {
  text: string
};
export default () => (
  <div>
    <Button text="Demo Button" />
  </div>
);

TypeError: Cannot read property 'props' of undefined react

1 Answers