A cross-origin error was thrown problem with Codesandbox.io

Question

I have "A cross-origin error was thrown" Error in Codesanbox.io when i tried to execute this code. please what can i do to go over ? I'm using Create-react-app with codesanbox.io

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends React.Component {
  state = {
    customer: [
      { id: 1, name: "Leon" },
      { id: 1, name: "Lea" },
      { id: 1, name: "Vanelle" }
    ]
  };
  render() {
    const title = "Customer list";
    const elements = this.state.customer.map();
    return (
      <div className="App">
        <h1>{title}</h1>
        <ul>
          <li>
            Philippe <button>X</button>
          </li>
        </ul>
        <form>
          <input type="text" placeholder="Add a customer" />
          <button>Confirm</button>
        </form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

https://codesandbox.io/embed/async-morning-0lti3?codemirror=1 — Tedajo Philippe, Dec 08 '19 at 19:25

score 1 · Accepted Answer · answered Dec 08 '19 at 19:40

Your render function should map through each of the customer found in the state. Just calling this.state.customer.map() throws an error which it seems is not handled properly by codesandbox.

Try this for your render:

render() {
    const title = "Customer list";
    return (
      <div className="App">
        <h1>{title}</h1>

        <ul>
        {
          this.state.customer.map(c => (
            <li key={c.id}>
             {c.name} <button>X</button>
            </li>
          ))
        }
        </ul>
        <form>
          <input type="text" placeholder="Add a customer" />
          <button>Confirm</button>
        </form>
      </div>
    );
  }

score 0 · Answer 2 · answered Dec 08 '19 at 18:50

May be it's codesandbox's fault? Did you read here: https://github.com/codesandbox/codesandbox-client/issues/667

Normally, cross-origin error is something you can control in the backend instead of frontend (browser). I suspect that you have called some API in the code that you shouldn't have the permission to call in the browser. CORS is a whole topic to read. To truly understand, I think you should spend some time to digest it.

A cross-origin error was thrown problem with Codesandbox.io

2 Answers2