setting states in react component not class

Question

I am working on a drag and drop component - but I am unsure how you would set the state inside a const export type of component? Should I turn this into a class - and if so what would be the ramifications of the properties coming in?

I want to edit the component - so the drag and drop will register as a file upload - programmatically uploading a file - the user has just dragged and dropped into the component.

import React from "react";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";

const renderDragDrop = ({
  input,
  rows,
  multiline,
  label,
  required,
  type,
  placeholder,
  fieldRef,
  onClick,
  disabled,
  meta: { touched, error, warning }
}) => {
  delete input.value;

  function handleDrop(e) {
    e.preventDefault();
    e.stopPropagation();

    //this.unhighlight(e);
    let dt = e.dataTransfer;
    let files = dt.files;

    console.log("files", files);
    //this.handleFiles(files);
  }

  function highlight(e) {
    console.log("highlight");
    e.preventDefault();
    e.stopPropagation();
    //set highlight true
    //this.setState({ isHighlighted: true });
  }

  function unhighlight(e) {
    e.preventDefault();
    e.stopPropagation();
    //set highlight false
    //this.setState({ isHighlighted: false });
  }

  return (
    <FormControl component="fieldset" fullWidth={true}>
      <TextField
        label={required ? label + " *" : label}
        type={"file"}
        error={touched && (error && error.length > 0 ? true : false)}
        helperText={
          touched &&
          ((error && error.length > 0 ? error : null) ||
            (warning && warning.length > 0 ? warning : null))
        }
        InputLabelProps={{ shrink: true }}
        disabled={disabled}
        {...input}
      />

      <div
        className="dragndrop padded-zone"
        onDrageEnter={highlight}
        onDragOver={highlight}
        onDragLeave={unhighlight}
        onDrop={handleDrop}
        //ref={this.state.dropArea}
      >
        <div className="drop-area">xx</div>
      </div>
    </FormControl>
  );
};

export default renderDragDrop;

Answer 1

You import the useState hook, and use it like:

import React, { useState } from "react";

…
const renderDragDrop = ({…}) => {
  const [test, setTest] = useState('FOO') // 'FOO' is the optional default value;


  console.log(test) // 'FOO'
  setTest('BAR');
  console.log(test) // BAR
…