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;

Huw · Accepted Answer · 2020-11-15 21:06:14Z

2

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
…

answered Nov 15, 2020 at 21:06

Huw

2892 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

The Old County Over a year ago

Not using hooks in this project - would it have to be made into a class to handle states in that case?

Huw Over a year ago

Yes, if you are not using hooks and you want to have state then you need this to be a class component (it is currently a functional component).

The Old County Over a year ago

stackoverflow.com/questions/64852179/… -- a followup as a class

Collectives™ on Stack Overflow

setting states in react component not class

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related