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);

Answer 1

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>
    );
  }

Answer 2

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.