How can I deserialize a nested React Element which is an elemen of a nested object inside an array?

Question

Hey guys I have a tough one here

I need to store and retrieve an object with nested elements and a function which returns serialized in the clients localStorage. As for the storing and retrieving, it works. But I am having an issue with functions which have been stringyfied, but won't go back to be actual functions anymore.

Here is an example of an array element:

As far as I am aware, this is called serialized in the JSON-Jargon. And the goal would be to unserialize them again in order to make them function again. In order to be able to store functions in the JSON format, I had "replace and revive" the arrays which had to be stored.

  let replacer = (key, value) => {
if (typeof value === "function") {
  return value.toString();
}
return value;

I turn functions to string and return them to the JSON. I invoke this helper function like this:

 localStorage.setItem(
                  "currentConfiguration",
                  JSON.stringify(
                    tableRef.current.dataManager.columns,
                    replacer,
                    2
                  )

Here is the code which is actually supposed to do: Undo what the replacer did and return actual functions instead of their strings.

let reviver = (key, value) => {
    if (typeof value === "string" && value.indexOf("function ") === 0) {
      let functionTemplate = `(${value})`;
      return eval((functionTemplate));
    }
    return value;
  };

Currently I am facing this screen whenever I try to render:

Would appriciate if anyone could lend a helping hand

Answer 1

Thanks everyone for taking your time to help, I found that this code below worked via @jspcal reference to this link for a more concise answer: React render multiple buttons in for loop from given integer

Here is the code I wrote to make it work:

// I added a constant 'box' and set an empty array
  const box = [];

  // I initiated days as 0 instead of 31 and if days are less than 31 then
  // for loop iterates over it until it reaches that number.
  for (let days = 0; days < 31; days++) {
    // Then the code pushes each time it loops to the empty array I initiated.
    box.push(
      <Grid item>
        <Box
          sx={{
            width: 300,
            height: 300,
            backgroundColor: 'primary.dark',
            '&:hover': {
              backgroundColor: 'primary.main',
              opacity: [0.9, 0.8, 0.7],
            },
          }}
        />
      </Grid>
    );
  }
  return (
    <Grid container spacing={1}>
      {/* And here I render the box array */}
      {box}
    </Grid>
  );

And here is a snapshot of my code for better visuals:

Thanks once again everyone!

Answer 2

In React, it is done using map. Check out react docs on rendering multiple components

 <Grid container spacing={1}>
    {days.map((day) => {
    return (<Grid item key={day}>
      <Box
        sx={{
          width: 300,
          height: 300,
          backgroundColor: 'primary.dark',
          '&:hover': {
            backgroundColor: 'primary.main',
            opacity: [0.9, 0.8, 0.7],
          },
        }}
      />
    </Grid>)
})
  </Grid>