Every time I submit a zone, it displays this error:
'Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development'
It only occurs when I press on the submit zone button which I guess is happening when the old states are being changed to the new one. (this.setState)
CreateZone.js
import React, { Component } from "react";
export default class CreateZone extends Component {
constructor(props) {
super(props);
this.state = {
zone: {
name: "",
zipCode: "",
},
};
}
updateZone(event) {
let updated = Object.assign({}, this.state.zone);
updated[event.target.id] = event.target.value;
this.setState({
zone: updated,
});
}
submitZone(event) {
console.log("SubmitZone: " + JSON.stringify(this.state.zone));
this.props.onCreate(this.state.zone);
}
render() {
return (
<div>
<input
onChange={this.updateZone.bind(this)}
className="form-control"
id="name"
type="text"
placeholder="Name"
/>{" "}
<br />
<input
onChange={this.updateZone.bind(this)}
className="form-control"
id="zipCode"
type="text"
placeholder="Zip Code"
/>{" "}
<br />
<input
onClick={this.submitZone.bind(this)}
className="btn btn-danger"
type="submit"
value="Submit Zone"
/>
</div>
);
}
}
Zones.js
import React, { Component } from "react";
import superagent from "superagent";
import { CreateZone, Zone } from "../presentation";
export default class Zones extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
};
}
componentDidMount() {
console.log("componentDidMount");
superagent
.get("/api/zone")
.query(null)
.set("Accept", "application/json")
.end((err, response) => {
if (err) {
alert("ERROR: " + err);
return;
}
console.log(JSON.stringify(response.body));
let results = response.body.results;
this.setState({
list: results,
});
});
}
addZone(zone) {
let updatedZone = Object.assign({}, zone);
updatedZone["zipCodes"] = updatedZone.zipCode.split(",");
console.log("ADD ZONE: " + JSON.stringify(updatedZone));
superagent
.post("/api/zone")
.send(updatedZone)
.set("Accept", "application/json")
.end((err, response) => {
if (err) {
alert("ERROR: " + err.message);
return;
}
console.log("ZONE CREATED: " + JSON.stringify(response));
let updatedList = Object.assign([], this.state.list);
updatedList.push(response.result);
this.setState({
list: updatedList,
});
});
}
render() {
const listItems = this.state.list.map((zone, i) => {
return (
<li key={i}>
{" "}
<Zone currentZone={zone} />{" "}
</li>
);
});
return (
<div>
<ol>{listItems}</ol>
<CreateZone onCreate={this.addZone.bind(this)} />
</div>
);
}
}
Zone.js
import React, { Component } from "react";
import styles from "./styles";
export default class Zone extends Component {
render() {
const zoneStyle = styles.zone;
return (
<div style={zoneStyle.container}>
<h2 style={zoneStyle.header}>
<a style={zoneStyle.title} href="#">
{" "}
{this.props.currentZone.name}{" "}
</a>
</h2>
<span className="detail"> {this.props.currentZone.zipCodes} </span>{" "}
<br />
<span className="detail">
{" "}
{this.props.currentZone.numComments} comments{" "}
</span>
</div>
);
}
}
