App crashes when this data is loaded into localStorage...

[Marco-exports]

Hi,

Each time I save this data to localStorage, my app crashes with:

Uncaught Error: Objects are not valid as a React child (found: object with keys {NAME, LIGHTS}). If you meant to render a collection of children, use an array instead.

{ NAME:"STUDY", LIGHTS: [
     {dali:6,type:"C",x:200,y:100,W:5},
     {dali:6,type:"C",x:130,y:120,W:5},
     {dali:3,type:"W",x:230,y:220,W:5},
     {dali:3,type:"S",x:330,y:320,W:5},
     {dali:0,type:"D",x:220,y:160},
     {dali:0,type:"D",x:120,y:260} ] }

Do you think this is a file format error ?

Is there another data format that I could use here ?

Thanks !

[Marco-exports]

Hi again...

The error might not be specific to recoil-persist, as I just tried to do a console.log("...") on this data set (the output result of a JSON.parse() on the above data:

Uncaught Error: Objects are not valid as a React child (found: object with keys {NAME, LIGHTS}). If you meant to render a collection of children, use an array instead.

React is treating this as an Object... is there a way to convert this into an Array ?

[polemius]

@Marco-exports Hi 👋

I think you could get values from object by name or using .map for array values.

I have created a quick example: codesandbox

With this code:

const test = {
  NAME: "STUDY",
  LIGHTS: [
    { dali: 6, type: "C", x: 200, y: 100, W: 5 },
    { dali: 6, type: "C", x: 130, y: 120, W: 5 },
    { dali: 3, type: "W", x: 230, y: 220, W: 5 },
    { dali: 3, type: "S", x: 330, y: 320, W: 5 },
    { dali: 0, type: "D", x: 220, y: 160 },
    { dali: 0, type: "D", x: 120, y: 260 }
  ]
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>{test.NAME}</div>
      <div>
        {test.LIGHTS.map((light) => {
          return (
            <div>
              <p>x: {light.x}</p>
              <p>y: {light.y}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}