CODEWITHSUNDEEP
javascriptreactjs
user12348779
user12348779

Reputation:

Cannot access 'sizeWidth' before initialization

I am trying to make a react app where I can style a Button using JavaScript by changing variables such as width, height, etc, but I am getting this error when trying to pass "width" and "height" values from my index.js to my App.js (where I export my Button)

I am receiving the error: "Cannot access 'sizeWidth' before initialization" when I reload my React app. (line 13)

App.js:

import {sizeWidth, sizeHeight} from './index';
import {Component} from "react";


// units are in px, colors are in HEX, rotation is in degrees

//element

class Page extends Component {
    render() {
        return (
            <Button width={sizeWidth} height={sizeHeight}/> // error is here
        )
    }
}

class Button extends Component {
    render() {
        return (
            <button className="element" style={{ width: sizeWidth, height: sizeHeight }}>BUTTON</button>
        );
    }
}

export default Page;

index.js:

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

const sizeWidth = 238;
const sizeHeight = 76;

export {sizeWidth, sizeHeight}

Would be appreciated a lot if someone would be able to assist me in solving this issue! I am very new to React.

Upvotes: 0

Views: 325

Answers (1)

user12348779
user12348779

Reputation:

I found the answer to my question, I stupidly rendered my App using ReactDOM.render before initializing my variables...

facepalm

Upvotes: 2

Related Questions