title: Updating a React state variable throws cross-origin error
body: <h2>Context</h2>
  <p>At the moment I am working on a project where I want to get data, more specifically a list/Array of Strings, from my Python API and display that list with React.
  I am getting the list and it looks completely fine. No <code>undefined</code> values, everything is a <code>String</code> and it really is an <code>Array</code>. So the <strong>retrieved data appears to be valid</strong>.
  After retrieving the data I want to set it as a state variable in React so that I can pass it to another component as a prop.</p>
  <p>I am using <a href="https://pywebview.flowrl.com/" rel="nofollow noreferrer">pywebview</a> as a React GUI for my Python application. The JavaScript modules are being bundled by webpack.</p>
  <h2>Error</h2>
  <p>Whenever I call <code>setCourses()</code> I am getting the following error and React shows a whitescreen.</p>
  <blockquote>
  <p>Error: A cross-origin error was thrown. React doesn't have access to
  the actual error object in development. See
  <a href="https://reactjs.org/docs/cross-origin-errors.html" rel="nofollow noreferrer">https://reactjs.org/docs/cross-origin-errors.html</a> for more
  information.</p>
  </blockquote>
  <h2>What I have noticed/tried</h2>
  <ul>
  <li>when calling <code>setCourses([&quot;foo0&quot;, foo1&quot;, &quot;foo2&quot;]);</code> this error is not thrown.</li>
  <li>when calling <code>setCourses(new Array(response));</code> it does not throw an error but somehow joins the Arrays elements to a new Array with the size of 1: [&quot;foo0&quot;, &quot;foo1&quot;, &quot;foo2&quot;] -&gt; [&quot;foo0,foo1,foo2&quot;].</li>
  <li>iterating over the Array and constructing a new one + checking that every element is a String</li>
  <li>the <a href="https://reactjs.org/docs/cross-origin-errors.html" rel="nofollow noreferrer">error page of React</a> mentioned using the <code>cheap-module-source-map</code> setting in case one is using webpack. Setting this didn't help either.</li>
  </ul>
  <h2>Similar questions (which didn't solve my poblem)</h2>
  <ul>
  <li><a href="https://stackoverflow.com/questions/48611310/uncaught-error-a-cross-origin-error-was-thrown-react-doesnt-have-access-to-th">Uncaught Error: A cross-origin error was thrown. React doesn&#39;t have access to the actual error object in development</a></li>
  <li><a href="https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-react-js">Correct modification of state arrays in React.js</a></li>
  <li><a href="https://stackoverflow.com/questions/51154713/i-cant-update-state-for-array-item-in-react-native">I can&#39;t update state for array item in react native</a></li>
  </ul>
  <h2>Simplified code snippet</h2>
  <p>As you can see below, I am fetching the data from the Python API in a <code>useEffect</code> hook and trying to set the state which shall rerender my component so that the child component <code>&lt;CourseList courses={courses} /&gt;</code> will display the courses.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default function Dashboard(props) {
      // some props etc. were removed to keep this snippet simple
      
      // the state variable which causes issues
      const [courses, setCourses] = React.useState([]);
    
      // get Data from Python API
      React.useEffect(()=&gt;{
          getData();
      }, []);
    
      /**
       * Gets the needed data (login status, courses, username) by calling the Python API
       */
      function getData() {
        window.pywebview.api.foo().then((foo) =&gt; {
          // do stuff
        }).then(() =&gt; {
          // fetch the courses from the Python API
          window.pywebview.api.getCourses().then((response) =&gt; {
            // try to update the state variable
            setCourses(response); // &lt;------- throws the error
          }).catch((response) =&gt; {console.log(response);
        });
    
      }
    
      return (
        &lt;Box&gt;
          &lt;MainAppBar /&gt;
          &lt;Grid container spacing={0}&gt;
              &lt;Grid item&gt;
                &lt;MenuList /&gt;
              &lt;/Grid&gt;
              &lt;Grid item&gt;
                &lt;CourseList courses={courses} /&gt; {/* passing the courses to the CourseList component */}
              &lt;/Grid&gt;
              &lt;FloatingSyncButton /&gt;
            &lt;/Grid&gt;
          &lt;/Box&gt;
      )
    }
    
    
    export function CourseList({ courses }) {
      
      // logic...
    
      return (
        &lt;List&gt;
        {/* trying to list each course item */}
          {courses.map((courseName) =&gt; {
            return (
              &lt;ListItem
                key={courseName}
                disablePadding
              &gt;
                &lt;ListItemButton&gt;
                &lt;Checkbox/&gt;
                  &lt;ListItemAvatar&gt;
                    &lt;Avatar&gt;{courseName}&lt;/Avatar&gt;
                  &lt;/ListItemAvatar&gt;
                  &lt;ListItemText primary={courseName} /&gt;
                &lt;/ListItemButton&gt;
              &lt;/ListItem&gt;
            );
          })}
        &lt;/List&gt;
      );
    }</code></pre>
  </div>
  </div>
  </p>
  <hr />
  <p><strong>I would appreciate any help. Thank you!</strong></p>