React variable import security

If I import an object into a React file to use some values in it, could it cause a security issue?

I.e., if I have an object like this:

var data = {
     'name': 'Adam',
     'id': 12345,
     'secret': 98765
}

and I import it like this:

import { data } from 'db.js';
 
function Index(){
     return(
          <>
             {data.name}
             {data.id}
          </>
     );
}

will I create a scenario where someone can use the imported "data" object to call and see the "secret" value, or does React prevent this from happening?

>Solution :

You should consider any code that is sent to the client’s machine to be public. Any sufficiently dedicated developer could reverse-engineer it eventually (though the size of the code and minification/obfuscation can make it more difficult).

The only way to keep secret secret is to not send it to the client in the first place – which could be done if all the rendering done on the server instead, with the resulting HTML markup being sent to the client. (That said, due to the much greater flexibility of client-rendered components, it would usually make more sense just to not include sensitive values in the bundle for the client.)