title: Update State in function outside class component
body: <p>I have a class component, within that calling a function. I have a state variable and want to update the state in function. Since it is different function I'm not able to update the value. How can I get the selected items details and update the state? when I do setState, receiving following error as 'TypeError: this.setState is not a function'</p>
  
  <p>any help appreciated
  Component</p>
  
  <pre><code>import React, { Component } from 'react'
  import PropTypes from "prop-types";
  import statedist from "./StateDistrict.json";
  
  const suggestions = statedist.states;
  
  
  function DownshiftMultiple(props) {
      const { classes } = props;
      const [inputValue, setInputValue] = React.useState("");
      const [selectedItem, setSelectedItem] = React.useState([]);
  
      function handleKeyDown(event) {
          if (
              selectedItem.length &amp;&amp;
              !inputValue.length &amp;&amp;
              event.key === "Backspace"
          ) {
              setSelectedItem(selectedItem.slice(0, selectedItem.length - 1));
          }
      }
  
      function handleInputChange(event) {
          setInputValue(event.target.value);
      }
  
      function handleChange(item) {
          let newSelectedItem = [...selectedItem];
          if (newSelectedItem.indexOf(item) === -1) {
              newSelectedItem = [...newSelectedItem, item];
          }
          setInputValue("");
          setSelectedItem(newSelectedItem);
           this.setState({ SelectedState: newSelectedItem }); // here i want to update selected items
  
      }
  
      const handleDelete = item =&gt; () =&gt; {
          const newSelectedItem = [...selectedItem];
          newSelectedItem.splice(newSelectedItem.indexOf(item), 1);
          setSelectedItem(newSelectedItem);
      };
  
      return (
          &lt;Downshift
              id="downshift-multiple"
              inputValue={inputValue}
              onChange={handleChange}
              selectedItem={selectedItem}
          &gt;
              {({
                  getInputProps,
                  getItemProps,
                  getLabelProps,
                  isOpen,
                  inputValue: inputValue2,
                  selectedItem: selectedItem2,
                  highlightedIndex
              }) =&gt; {
                  const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
                      onKeyDown: handleKeyDown,
                      // placeholder: "Select multiple State"
                  });
  
                  return (
                      &lt;div className={classes.container}&gt;
                          {renderInput({
                              fullWidth: true,
                              classes,
                              // label: "States",
                              InputLabelProps: getLabelProps(),
                              InputProps: {
                                  startAdornment: selectedItem.map(item =&gt; (
                                      &lt;Chip
                                          key={item}
                                          tabIndex={-1}
                                          label={item}
                                          className={classes.chip}
                                          onDelete={handleDelete(item)}
                                      /&gt;
                                  )),
                                  onBlur,
                                  onChange: event =&gt; {
                                      handleInputChange(event);
                                      onChange(event);
                                  },
                                  onFocus
                              },
                              inputProps
                          })}
  
                          {isOpen ? (
                              &lt;Paper className={classes.paper} square&gt;
                                  {getSuggestions(inputValue2).map((suggestion, index) =&gt;
                                      renderSuggestion({
                                          suggestion,
                                          index,
                                          itemProps: getItemProps({ item: suggestion.state }),
                                          highlightedIndex,
                                          selectedItem: selectedItem2
                                      })
                                  )}
                              &lt;/Paper&gt;
                          ) : null}
                      &lt;/div&gt;
                  );
              }}
          &lt;/Downshift&gt;
      );
  }
  
  class autoCompleteState extends Component {
      constructor(props) {
          super(props);
          this.state = {
              SelectedState:'',
          }
         // this.showProfile = this.showProfile.bind(this)
      }
  
      render() {
          const { classes, } = this.props;
          return (
              &lt;div&gt;
                  &lt;DownshiftMultiple classes={classes} /&gt;
              &lt;/div&gt;
          )
      }
  }
  export default withStyles(Styles)(autoCompleteState);
  </code></pre>