Is there a way of making data brought in by `fetch` globally accessible to other components in React?

Currently, I have a json file called `page.json` which has data set out as below:

```
{
"logo": {
    "src": "images/logo.png"
},
"logout": {
    "text": "Logout"
},
"comingSoon": {
    "title": "There's more to come!",
    "text": "We know it might look a bit bare here right now, but don't worry - we're working on lots of new features coming soon...",
    "points": [
        {
            "id": 1,
            "title": "View documents plus saved quotes and exclusive discounts",
            "text": "You can do all this right now"
        },
        {
            "id": 2,
            "title": "Make simple changes",
            "text": "Change your email address, phone number or marketing permissions - Coming August 2018"
        },
        {
            "id": 3,
            "title": "Make all changes",
            "text": "Add a car, tell us you've moved house, the posibilities are endless - Coming April 2025"
        }
    ]
},
"test": "hello"

```

}

I'd like my components to be able to access this data, which at the moment is being called in by using fetch():

```
        class FetchDemo extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
              pageData: []
            };
        }

        componentDidMount() {
            fetch('./page.json').then(res => res.json())
            .then( (result) => {
                this.setState({ 
                    pageData: result
                });
            });
        }

        render(){
            return ( 
                <span>
                {this.state.pageData}
                </span>
            )
        }
    }

```

I have created a `const` with some inline arrays in, so I can call these in like 
`<WelcomeMessage name={policies[0].id} />` 
and this works as I'd hope.

Please let me know if you need me to explain further - first post 'n all!