reactjs config.js how to read config JSON

Question

So I am trying to set a global config file. So that I can set a global site url (forms etc).

This is my config file.

{
site:"example.com"
}

I am using

const config = Require("config");

I am trying to the put it into the return function

export default function SignInSide() {
  const classes = useStyles();

  return ( <form action="{config.site}/users/login" method="POST" className={classes.form} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            >
              Sign In
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2">
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
            <Box mt={5}>
              <Copyright />
            </Box>
          </form>)

}

I am wondering how do I get it to read {config.site}

Answer 1

You can have a config file called global.config.js

export const Properties = {
    site : "example.com",
    ...
}

While Import You can use,

import { Properties } from 'global.config'; // PATH TO CONFIG FILE

Comming to you new question,

<form action=`http://${Properties.site)/users/login`>
// Your logic goes here...

Answer 2

i think you can achieve this with the example:

import * as config from './config.json'
console.log(config.site)

edit:typo