Q:

Problem converting state in class to function in react

I have been converting all my classes to functions to update my react projects.  I am getting a:
'ESLint has encountered a parsing error' in my code.  If I remove ONE line, the error disappears.  Here's the code
import React, { useState } from "react";
import orderBy from "lodash/orderBy";
import SelectField from "@material-ui/core";
import MenuItem from "@material-ui/core";
import TextField from "@material-ui/core";
import Table from "./Table";

const invertDirection = {
  asc: "desc",
  desc: "asc"
};

const Patients = props =>
{
  var handleRemove = (i) => {
    setPatientsData(patientsData.filter((row, j) => j !== i));
  };

  var handleSelect = (i) =>
  {
    setEditIdx(i);
  }

  const [editIdx, setEditIdx] = useState(-1);
  const [columnToSort, setColumnToSort] = useState('');
  const [sortDirection, setSortDirection] = useState('asc');
  const [patientsData, setPatientsData] = useState([]);
  const [columnToQuery, setColumnToQuery] = useState('');
  const [columnQueryValue, setColumnQueryValue] = useState('');

  var handleSort = columnName =>
  {
    if (columnName === columnToSort) {
      setSortDirection(invertDirection[sortDirection]);
    }
    else {
      setSortDirection("asc");
    }
    setColumnToSort(columnName);
  };

  var handleQueryChange = (value) =>
  {
    setColumnQueryValue({ value });
  }

  const lowerCaseQuery = this.state.query.toLowerCase();
  return (
      <div>
        <div style={{ display: "flex" }}>
          <div style={{ display: "flex", margin: "auto" }}>
            <TextField
              hintText="Query"
              floatingLabelText="Query"
            value={columnQueryValue}
            onChange={(event) => setColumnQueryValue({event.target.value })} --->>>ERROR
              floatingLabelFixed
            />
            <SelectField
              style={{ marginLeft: "1em" }}
              floatingLabelText="Select a column"
              value={columnToQuery}
              onChange={(event, index, value) => setColumnToQuery({value }) }
            >
              <MenuItem value="firstName" primaryText="First Name" />
              <MenuItem value="lastName" primaryText="Last Name" />
              <MenuItem value="username" primaryText="Username" />
              <MenuItem value="email" primaryText="Email" />
            </SelectField>
          </div>
        </div>
        <Table
          handleSort={handleSort}
          handleRemove={handleRemove}
          editIdx={editIdx}
          handleSelect={handleSelect}
          columnToSort={columnToSort}
          sortDirection={sortDirection}
          data={orderBy(
            columnQueryValue
              ? patientsData.filter(x =>
                x[columnToQuery]
                  .toLowerCase()
                  .includes(lowerCaseQuery)
              )
              : patientsData,
            columnToSort,
            sortDirection
          )}
          header={[
            {
              name: "First name",
              prop: "firstName"
            },
            {
              name: "Last name",
              prop: "lastName"
            },
            {
              name: "Username",
              prop: "username"
            },
            {
              name: "Email",
              prop: "email"
            }
          ]}
        />
      </div>
  );
}

export default Patients;

Specifically, this line:
onChange={(event) => setColumnQueryValue({event.target.value })}

I've spent 24 hours trying to fix it, tried everything, but still get the error.  Any help would be greatly appreciated!
ADDED:  I fixed a typo that was not causing the problem.  Specifically, the interpreter complains about the 'event.target.value' I am passing to the setColumnQueryValue which is the state setter for ColumnQueryValue, which is a string.  Which is SUPPOSED to be what a text field returns. (event.target.value).  That is the code that is the issue and that I cannot figure out why it's complaining.

A:

Firstly, You don't have any setQueryValue function in your code, I think you misinterpreted with setColumnQueryValue. Secondly, you're passing an object and didn't define a key for the event.target.value. As I see that you initialized columnQueryValue with empty string so you should pass a string value in function.
onChange={(event) => setColumnQueryValue(event.target.value)}

