JavaScript

completely new to React and failing to understand this error: Compiled with problems:X

ERROR

[eslint] src/App.js Line 66:16: ‘App’ is not defined no-undef

Search for the keywords to learn more about each error.

I have found multiple “solutions” for this but none of which I can completely comprehend in my case for some reason, probably just a mental blocker. I essentially used the template create-react-app and added in my own files which had what I wanted to create a basic color changer app. After adding files I get the above error. I’ve added a screenshot of my file layout: File layout

Here is my app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button.js';

class Random extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: [100, 200, 300] };
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    this.applyColor();
  }

  componentDidUpdate(prevProps, prevState) {
    this.applyColor();
  }

  formatColor(ary) {
    return 'rgb(' + ary.join(', ') + ')';
  }

  isLight() {
    const rgb = this.state.color;
    return rgb.reduce((a,b) => a+b) < 127 * 3;
  }

  applyColor() {
    const color = this.formatColor(this.state.color);
    document.body.style.background = color;
  }

  chooseColor() {
    const random = [];
    for (let i = 0; i < 3; i++) {
      random.push(Math.floor(Math.random()*256));
    }
    return random;
  }

  handleClick() {
    this.setState({
      color: this.chooseColor()
      });
  }

  render() {
    return (
      <div>
        <h1 className={this.isLight() ? 'white' : 'black'}>
          Your color is { this.formatColor( this.state.color)}!
        </h1>
        <Button 
        onClick={ this.handleClick }
        light={ this.isLight() } />
      </div>
    );
  }
}

ReactDOM.render(
  <Random />, 
  document.getElementById('root')
);

export default App;

I’d really appreciate any help on what I’m doing wrong! Thanks in advance.

Answer

If you ran npx create-next-app your-app there should be an App.js file in the src directory. That file is where you should add your random component or rename App.js to Random.js and import it to index.js.

No need to add to the bellow code to your app.js file if it is imported to index.js

ReactDOM.render(
  <Random />, 
  document.getElementById('root')
);

Getting a error using React – ‘App’ is not defined

Advertisement

Answer