Unable to edit JavaScript object with dynamically named properties: property is missing in object literal

Question

I am trying to understand why this code would not work:

 const [data, setData] = useState(() => {
    var data = {
      some_var: 0,
    };
    data["test"] = "test";
    return data;
  });

I get the following error: Cannot assign "test" to data["test"] because property test is missing in object literal

but according to this post this is something I should be able to validly do in JS.

are you import `import React, { useEffect, useState } from "react";` — نور, Nov 01 '20 at 05:27
try making putting ```some_var``` in quotes like ```'some_var'```. and also use ```let data = {``` i suspect the hoisting is making it act strange. — berlin, Nov 01 '20 at 05:30
@berlin thanks, still getting the same error message though :/ — cosmicluna, Nov 01 '20 at 05:47
Where exactly are you getting that error? Sounds like a typescript compilation thing. — Bergi, Nov 01 '20 at 05:48
I've tried your example code and it is working fine. I can access test property and can update the state as well. Please refer to this: https://codesandbox.io/s/winter-dust-rsm16 — VIshal Jain, Nov 01 '20 at 06:32

score 0 · Answer 1 · answered Nov 01 '20 at 06:17

I tried this and it worked

import React, { useState } from "react";
import ReactDOM from "react-dom";
const App = () => {
  const [data, setData] = useState(() => {
    var data = {
      some_var: 0,
    };
    data["test"] = "test";
    return data;
  
  });
  console.log(data)====>{some_var: 0, test: "test"}

  return (
    <div >
     
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Unable to edit JavaScript object with dynamically named properties: property is missing in object literal

1 Answers1