How to use fetch in a function? – Blancer.com Tutorials and projects

<!DOCTYPE html>
<html>
    <style>
        #button {
            width: 250px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            vertical-align: middle;
            font-size: 32px;
        }
    </style>
    <body>
        <button id="button" type="button" onclick="OnClick()">Show Data</button>
    </body>
    <script>
        function OnClick() {
            fetch('./Data.json')
                .then(res => res.json)
                .then(data => {
                    console.log(data)
                })
        }
    </script>
</html>

I try to make a function that data will show out when I click the button, but the console respond” f json() { [native code] }. How to fix this error