I am not able to use ipfs

I want to publish files on ipfs but it's showing me an error.

Here is my code...

const ipfsClient = require('ipfs-http-client');
const ipfs = ipfsClient({host: 'ipfs.infura.io', port: 5001, protocol: 
'https'});

function App() {
const [buffer, setBuffer] = useState();

const handleChange = (event) => {
  event.preventDefault();
  const file = event.target.files[0];
  const reader = new window.FileReader();
  reader.readAsArrayBuffer(file);
  reader.onloadend = () =>{
    setBuffer(reader.result);
  }

}

const handleSubmit = async(event) => {
    event.preventDefault();
    console.log('submitting...')
    await ipfs.add({buffer}, (error, result) => {
      console.log('ipfs results');
      if(error){
        console.error(error);
        return;
      }
    });
}

I am getting this error in browser...

TypeError: ipfsClient is not a function

Should be some breaking changes. Most probably the copy of the example you have are old version. If you visit the latest readme, the new version should be initiated with:

import { create } from 'ipfs-http-client'
const client = create()
const client = create(new URL('http://127.0.0.1:5002'))
const { cid } = await client.add('Hello world!')

You can rollback to use the old version by specifiying the version no @, i.e. npm install ipfs-http-client@42.0.0. Instead of npm install ipfs-http-client which always pull the latest version (53.X now).

It's also possible to view your installed version in 'package.json' file to see the version you are using and edit with the version you need, 'delete node_modules' folder and re-run npm install. But this requires you to save, which needs a parameter -s, so to run is npm install -s ipfs-http-client

Version 42, sample code should be the one you are using 'https://github.com/ipfs/js-ipfs/tree/v42.0.0'.

Version 53(or the official 1.0 release), tells that there is a breaking change if you visit the official github site; where ipfs-http-client requires a create() and not to be used directly.