Compiled is complete and a blank web page opens. What did I do wrong?

I'm sure I have deployed contract on remix correctly but just waiting could you help me?

Failed to compile
./src/App.js

Line 104: 'Grid' is not defined react/jsx-no-undef
Line 106: 'Form' is not defined react/jsx-no-undef
Line 111: 'Button' is not defined react/jsx-no-undef
Line 119: 'Button' is not defined react/jsx-no-undef
Line 121: 'Table' is not defined react/jsx-no-undef

Please help!

$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

./node_modules/ipfs-api/src/utils/module-config.js:7

Read more here: http://bit.ly/2tRViJ9

error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c react-scripts build
Directory: /Users/bolin/Documents/IPFS/eth-ipfs
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/bolin/Documents/IPFS/eth-ipfs/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Is there any way to change the testnet? I cannot find in the code.
Thanks

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// import "bootstrap/dist/css/bootstrap.css";
// import "bootstrap/dist/css/bootstrap-theme.css";

ReactDOM.render(
<React.StrictMode>

</React.StrictMode>,
document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

import { Container, Button, Form, Table } from 'react-bootstrap';
import React, { Component } from "react";
//import logo from ‘./logo.svg’;
import "./App.css";
import web3 from "./web3";
import ipfs from "./ipfs";
import storehash from "./storehash";
class App extends Component {

state = {
  ipfsHash:null,
  buffer:'',
  ethAddress:'',
  blockNumber:'',
  transactionHash:'',
  gasUsed:'',
  txReceipt: ''   
};

captureFile =(event) => {
event.stopPropagation()
event.preventDefault()
const file = event.target.files[0]
let reader = new window.FileReader()
reader.readAsArrayBuffer(file)
reader.onloadend = () => this.convertToBuffer(reader)
};
convertToBuffer = async(reader) => {
//file is converted to a buffer for upload to IPFS
const buffer = await Buffer.from(reader.result);
//set this buffer -using es6 syntax
this.setState({buffer});
};
onClick = async () => {
try{
this.setState({blockNumber:"waiting.."});
this.setState({gasUsed:"waiting..."});
//get Transaction Receipt in console on click
//See: https://web3js.readthedocs.io/en/1.0/web3-eth.html#gettransactionreceipt
await web3.eth.getTransactionReceipt(this.state.transactionHash, (err, txReceipt)=>{
console.log(err,txReceipt);
this.setState({txReceipt});
}); //await for getTransactionReceipt
await this.setState({blockNumber: this.state.txReceipt.blockNumber});
await this.setState({gasUsed: this.state.txReceipt.gasUsed});
} //try
catch(error){
console.log(error);
} //catch
} //onClick
onSubmit = async (event) => {
event.preventDefault();
//bring in user's metamask account address
const accounts = await web3.eth.getAccounts();

  console.log('Sending from Metamask account: ' + accounts[0]);
//obtain contract address from storehash.js
  const ethAddress= await storehash.options.address;
  this.setState({ethAddress});
//save document to IPFS,return its hash#, and set hash# to state
//https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#add 
  await ipfs.add(this.state.buffer, (err, ipfsHash) => {
    console.log(err,ipfsHash);
    //setState by setting ipfsHash to ipfsHash[0].hash 
    this.setState({ ipfsHash:ipfsHash[0].hash });

// call Ethereum contract method "sendHash" and .send IPFS hash to etheruem contract
//return the transaction hash from the ethereum contract
//see, this https://web3js.readthedocs.io/en/1.0/web3-eth-contract.html#methods-mymethod-send

    storehash.methods.sendHash(this.state.ipfsHash).send({
      from: accounts[0] 
    }, (error, transactionHash) => {
      console.log(transactionHash);
      this.setState({transactionHash});
    }); //storehash 
  }) //await ipfs.add 
}; //onSubmit

render() {

  return (
    <div className="App">
      <header className="App-header">
        <h1> Ethereum and IPFS with Create React App</h1>
      </header>
      
      <hr />

Choose file to send to IPFS

            <tbody>
              <tr>
                <td>IPFS Hash # stored on Eth Contract</td>
                <td>{this.state.ipfsHash}</td>
              </tr>
              <tr>
                <td>Ethereum Contract Address</td>
                <td>{this.state.ethAddress}</td>
              </tr>
              <tr>
                <td>Tx Hash # </td>
                <td>{this.state.transactionHash}</td>
              </tr>
              <tr>
                <td>Block Number # </td>
                <td>{this.state.blockNumber}</td>
              </tr>
              <tr>
                <td>Gas Used</td>
                <td>{this.state.gasUsed}</td>
              </tr>
            
            </tbody>
        </Table>
    </Container>
 </div>
  );
} //render

} //App
export default App;

When I am using ipfs.add it's not even going into the function and comes out. I think file is not getting uploded to IPFS and not creating IPFS hash.

×
input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
in input (at App.js:103)
in form (created by Form)
in Form (at App.js:102)
in div (created by Grid)
in Grid (at App.js:100)
in hr (at App.js:99)
in div (at App.js:94)
in App (at src/index.js:10)