Build a Random Quote Machine(Issue Resolved)

JavaScript
1

Tell us what’s happening:


I keep getting these errors. Can someone please help me understand what I am doing wrong.

TypeError: Cannot set property 'props' of undefined
Component
C:/Users/Thunder/react-test/node_modules/react/cjs/react.development.js:279
  276 |  */
  277 | 
  278 | function Component(props, context, updater) {
> 279 |   this.props = props;
      | ^  280 |   this.context = context; // If a component has string refs, we will assign a different object later.
  281 | 
  282 |   this.refs = emptyObject; // We initialize the default updater but the real one gets injected by the
View compiled
Module../src/App.js
C:/Users/Thunder/react-test/src/App.js:7
   4 | import Button from './components/Button';
   5 | 
   6 | 
>  7 | class App extends Component() {
   8 |   nextQuoteClickHandler() {
   9 |     console.log('hi')
  10 |   }
View compiled
__webpack_require__
C:/Users/Thunder/react-test/webpack/bootstrap:785
  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;
View compiled
fn
C:/Users/Thunder/react-test/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:222:62
__webpack_require__
C:/Users/Thunder/react-test/webpack/bootstrap:785
  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;
View compiled
fn
C:/Users/Thunder/react-test/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:349:18
__webpack_require__
C:/Users/Thunder/react-test/webpack/bootstrap:785
  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;
View compiled
checkDeferredModules
C:/Users/Thunder/react-test/webpack/bootstrap:45
  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
C:/Users/Thunder/react-test/webpack/bootstrap:32
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:77

Your code so far


import React, { Component } from 'react';
import './App.css';
import Button from './components/Button';


class App extends Component() {
  nextQuoteClickHandler() {
    console.log('hi')
  }
  
  render () {
  return (
    <div className="App" id="quote-box">
     <Button buttonNameDisplay = "Activist Quotes" clickHandler={this.nextQuoteClickHandler}/>
    </div>
  );
  }
}
export default App;

import React from 'react';

const Button = ({ buttonNameDisplay, clickHandler }) => (
     <button onClick={clickHandler}>{buttonNameDisplay}</button>
);

export default Button;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:

2

Hello,

Is the above your full code?

I would like to help but I’m just so bad at reading partial code. I like to take people’s code and run it on my own machine.

3

Yeah it’s the full code. I attempting to try and use react. So, I created a react app.

1 Like
4

Sweet, I’ll have a look.

No promises but I’ll try my best to figure out what’s wrong.

5

Sounds good, Thank you for taking a look.

1 Like
6

Ah, it’s a very minor issue.

Look at the following:

class App extends Component() {
  nextQuoteClickHandler() {
    console.log('hi')
  }
  
  render () {
  return (
    <div className="App" id="quote-box">
     <Button buttonNameDisplay = "Activist Quotes" clickHandler={this.nextQuoteClickHandler}/>
    </div>
  );
  }
}

class syntax is different than a function so there shouldn’t be any ().

1 Like
7

Thank you. That definitely fixed the problem.

2 Likes
8

No prob.

I’m glad that it’s fixed.