json.parse triggers cross-origin error in React / MERN

Question

I have a data structure that when I console.log it, it works just fine:

console.log(JSON.parse([values.category2]).needed_skills);

But when I pass the result of JSON.parse([values.category2]).needed_skills to a component within my application, the whole thing crashes with a cross-origin error.

I can't understand why because I have enabled CORS on all of my data coming from the API, you can even see it in the request headers:

Here is the UI component that (when I make it map over the result of JSON.parse([values.category2]).needed_skills) just crashes with a cross-origin error.:

    if(values) {
    return values.skills_required.map((skill, idx) => {
      return (
        <div className="input-group">
            <select 
                  onChange={e => updateSkill(e, idx)} 
                  type="text"
                  className="form-control">
                  <option>Select an option...</option>


            {JSON.parse([values.category2]).needed_skills && JSON.parse([values.category2]).needed_skills.map((q, w) => {
            console.log(JSON.stringify(q));
            console.log(w)
                  return(
                              <option 
                                key={w}
                                value={JSON.stringify(q)}>
                                 {JSON.stringify(q)}

                                </option> 

                              )})}


               </select>
              <div className="input-group-append">
                  <button 
                        className="btn btn-outline-danger mb-3" 
                        type="button" 
                        id="button-addon2" 
                        onClick={() => removeSkill(idx)}>x
                   </button>
              </div>
        </div>
      );
    });
    };
  };

The part that really confuses me is that I can manipulate the exact same resulting data object in other parts of the application without even needing to JSON.parse the result, however the issue seems to be an underlying problem with the data representation itself.

console.log(values.category2.needed_skills); returns undefined

console.log(JSON.parse([values.category2]).needed_skills) returns exactly what I need to map over in my UI component above - yet for some reason when I JSON.parse in the UI component it crashes, and when I dont call JSON.parse in the UI, everything is fine (except that I cant map over the array):

Answer 1

For JSON.parse to work, you have to wrap it in a try-catch block.

In your case it would be:

if(values) {
let category2 = [];
try {
    category2 = JSON.parse([values.category2]);
} catch(e) {console.log(e)}
return values.skills_required.map((skill, idx) => {
  return (
    <div className="input-group">
        <select 
              onChange={e => updateSkill(e, idx)} 
              type="text"
              className="form-control">
              <option>Select an option...</option>


        {category2.needed_skills && category2.needed_skills.map(...)}
    ...
  );
);