I had everything working in one .jsx file, but I lost in that long file. So I have divided everything in multiple .jsx and and used browserify/watchify to transform to .js
watchify -t reactify marek.jsx -o 'exorcist bundle.js.map > bundle.js' -d -v
And now I am getting:
TypeError: props is undefined in Firefox
Uncaught TypeError: Cannot read property 'href' of undefined in Chrome
For line:
ListGroup.js:75
return props.href || props.onClick;
What I have done wrong?
bundle.jsx
var React = require('react/addons');
var Adresy = require('./Adresy.jsx');
var App = React.createClass({
displayName: "App",
getInitialState: function() {
return {data: []};
},
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err)
{console.error(this.props.url,status, err.toString());
}.bind(this)});
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="container">
<div className="row">
<div className="col-md-6">
<Adresy data={this.state.data.adresy}/>
</div>
</div>
</div>
);
}
});
React.render(
<App url={res} pollInterval={20000} />,
document.getElementById("content")
);
Adresy.jsx
var React = require('react');
var Panel = require('react-bootstrap/lib/Panel');
var ListGroup = require('react-bootstrap/lib/ListGroup');
var ListGroupItem = require('react-bootstrap/lib/ListGroupItem');
var ButtonToolbar = require('react-bootstrap/lib/ButtonToolbar');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var Adresy = React.createClass({
getInitialState: function() {
return {data: []};
},
getDefaultProps: function() {
return {data: []};
},
render: function() {
return (
<Panel collapsible defaultCollapsed header='Adresy' className="TTemplate">
<ListGroup fill>
{
this.props.data.map(function(value) {
return
<ListGroupItem key={value.adres_id} >
<div className="row">
<div className="col-md-6">
<p>{value.st}</p>
</div>
</ListGroupItem>
})
}
</ListGroup>
</Panel>
);
}
});
module.exports = Adresy;
You mentioned that this code is auto-generated, but the formatting looks very off. There is a bug in the code you've posted, but I'm not sure if it's a copy/paste/formatting thing, or something actually wrong in your code:
The
map
function will returnundefined
becausereturn
is on a line by itself:Furthermore, I don't think the code as shown will even execute; if you line up the indentation, you can see you're missing a closing
</div>
JSX tag:I suspect that one of these issues, or something related, is causing
ListGroup
to not get the rightchildren
property, causing it to fail in itsisAnchor
method:which is called with the child's props:
(and more; see the source for details).