More easily

app.js

import React, { useRef } from "react";
import {
  AppBar, Typography, Toolbar, TextField
} from "@material-ui/core";

function App() {
  const fields = {
    name: useRef(),
    github: useRef(),
    linkedin: useRef(),
    website: useRef()
  };
  
  const handleSubmit = e => {
    e.preventDefault();
    
    const data = Object.keys(fields).reduce(
      (acc, field) => ({ ...acc, [field]: field[field].current.value }),
      {}
    );
    
    console.log(data);
  };

  return (
    <>
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="h6" color="inherit">
            Performance Form
          </Typography>
        </Toolbar>
      </AppBar>

      <form onSubmit={handleSubmit}>
        <TextField
          ref={fields.name}
          label="Name:"
          fullWidth
        />
        <TextField
          ref={fields.github}
          label="Github:"
          fullWidth
        />
        <TextField
          ref={fields.linkedin}
          label="Linkedin:"
          fullWidth
        />
        <TextField
          ref={fields.website}
          label="Website:"
          fullWidth
        />
      </form>
    </>
  );
}

export default App;