I have a file called data.json and in it i have an object called "Labels". I'm trying to fill the labels in my form with the elements in the JSON object.

JSON Object: 

```
 "Labels": [
    {
      "siteName": "Site Name"
    },
    {
      "siteAdd": "Site Address"
    },
    {
      "siteCounty": "Site County"
    },
    {
      "Location": "Site Location"
    },
    {
      "gps": "GPS: Entrance/Exit"
    },
    {
      "w3w": "W3W: Entrance/Exit"
    },
    {
      "information": "Information"
    },
    {
      "email": "Site Email"
    },
    {
      "number": "Site Phone Number"
    },
    {
      "Categories": "Site Category(s)"
    },
    {
      "times": "Opening Times"
    },
    {
      "fees": "Admission Fees"
    },
    {
      "access": "Accessability"
    },
    {
      "text": "Text Narrative"
    },
    {
      "text-header": "Header"
    },
    {
      "text-content": "Content"
    }
  ]

```

FORM:

```
<Form onSubmit={this.handleSubmit} className="form">
                {/* General Information */}
                <FormGroup row>
                    <Label for="siteName" id="siteName" sm={2}></Label>
                    <Col sm={10}>
                        <Input type="text" name="siteName" id="siteName" placeholder="" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="siteAddress" sm={2}>Site Address</Label>
                    <Col sm={10}>
                        <Input type="textarea" name="siteAddress" id="siteAddress" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="" sm={2}>Site County</Label>
                    <Col sm={10}>
                        <Input className="form-control" type="select">
                            { counties.map(c => (<option key={c.value} value={c.value}>{c.display}</option>))}
                        </Input>
                    </Col>
                </FormGroup>
                <hr/>
                {/* Location Information */}
                <p className="heading">Location</p>
                <FormGroup row>
                    <Label for="gps" sm={2}>GPS: Entrance/Exit</Label>
                    <Col sm={10}>
                        <Input type="text" name="gps" id="gps" placeholder="entrance 3 words , exit 3 words" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="w3w" sm={2}>W3W: Entrance/Exit</Label>
                    <Col sm={10}>
                        <Input type="text" name="w3w" id="w3w" />
                    </Col>
                </FormGroup>
                <hr/>
                <p className="heading">Information</p>
                <FormGroup row>
                    <Label for="siteEmail" sm={2}>Site E-mail</Label>
                    <Col sm={10}>
                        <Input type="email" name="siteEmail" id="siteEmail" placeholder="example@example.com" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="siteNumber" sm={2}>Site Phone Number</Label>
                    <Col sm={10}>
                        <Input type="tel" name="siteNumber" id="siteNumber" placeholder="" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="siteCat" sm={2}>Site Category(s)</Label>
                    <Col sm={10}>
                        <Input type="text" name="siteCat" id="siteCat" multiple />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="openTimes" sm={2}>Opening Times</Label>
                    <Col sm={10}>
                        <Input type="text" name="openTimes" id="openTimes" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="fees" sm={2}>Admission Fees</Label>
                    <Col sm={10}>
                        <Input type="textarea" name="fees" id="fees" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="access" sm={2}>Accessability</Label>
                    <Col sm={10}>
                        <Input type="text" name="access" id="access" />
                    </Col>
                </FormGroup>
                <hr/>
                <p className="heading">Text Narrative</p>
                <FormGroup row>
                    <Label for="txt-header" sm={2}>Header</Label>
                    <Col sm={10}>
                        <Input type="textarea" name="txt-header" id="txt-header" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="txt-content" sm={2}>Content</Label>
                    <Col sm={10}>
                        <Input type="textarea" name="txt-content" id="txt-content" />
                    </Col>
                </FormGroup>
                <FormGroup check row>
                    <Col sm={{ size: 10, offset: 2 }}>
                        <Link to="/newSite/tours"><Button className="btn-primary">Tours &rarr;</Button></Link>
                    </Col>
                </FormGroup> 
            </Form>

```

So far I have tried:

{ labels.siteName }
Using document.getElementbyID and changing the value.
Even when I console.log it it's being returned as undefined. I'm using json loader to import it into my react component.