Eugene Podoliako Eugene Podoliako - 2 months ago 28
React JSX Question

React Uncaught ReferenceError: variable is not defined

I use one component 2 times. When it call first time evering is good but when I call second time (move to different component through the react router) I have exception

Uncaught ReferenceError: titleStyle is not defined
. In console I see the problem in this line:
_react2.default.createElement("h2", { style: titleStyle },this.props.title,":")

What I did wrong?

TitleWithAddButton.jsx (the component with problem)

import React from 'react';
import {Link} from 'react-router'

export default class TitleWithAddButton extends React.Component{
render(){
let titleStyle = {
width:"50%"
};

var button = {
width: "10%",
float: "right"
};

return (
<div className="title-with-add-button">
<div>
<Link to="/carwashAdd"><button type="button" className="btn btn-success" style={button}>Add</button></Link>
</div>
<h2 style={titleStyle}>{this.props.title}:</h2>
</div>
)
}
}


CarWashPage.jsx (the first time componen is call from it)

import React from 'react';
import TitleWithAddButton from './TitleWithAddButton.jsx';
import AllCarWashTable from './carwash/AllCarWashTable.jsx'

export default class CarWashPage extends React.Component{

render(){
var carWashPageStyle = {
paddingLeft: 10,
paddingRight: 10
}

return (
<div style={carWashPageStyle}>
<TitleWithAddButton title="All carwash"/>
<AllCarWashTable/>
</div>
)
}
}


AddCarWashPage.jsx (second time component is call from here)

import React from 'react';
import Title from './../Title.jsx'

export default class AddCarWashPage extends React.Component{

render(){
var addCarWashPage = {
paddingLeft: 10,
paddingRight: 10
}

return (
<div style={addCarWashPage}>
<Title title="Add CarWash"/>
</div>
)
}
}

leo leo
Answer

You meant to include TitleWithAddButton in the file AddCarWashPage.jsx where your second call happens, but included import Title from './../Title.jsx' instead.

Comments