Update State in function outside class component

Question

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'

any help appreciated Component

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 &&
            !inputValue.length &&
            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 => () => {
        const newSelectedItem = [...selectedItem];
        newSelectedItem.splice(newSelectedItem.indexOf(item), 1);
        setSelectedItem(newSelectedItem);
    };

    return (
        <Downshift
            id="downshift-multiple"
            inputValue={inputValue}
            onChange={handleChange}
            selectedItem={selectedItem}
        >
            {({
                getInputProps,
                getItemProps,
                getLabelProps,
                isOpen,
                inputValue: inputValue2,
                selectedItem: selectedItem2,
                highlightedIndex
            }) => {
                const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
                    onKeyDown: handleKeyDown,
                    // placeholder: "Select multiple State"
                });

                return (
                    <div className={classes.container}>
                        {renderInput({
                            fullWidth: true,
                            classes,
                            // label: "States",
                            InputLabelProps: getLabelProps(),
                            InputProps: {
                                startAdornment: selectedItem.map(item => (
                                    <Chip
                                        key={item}
                                        tabIndex={-1}
                                        label={item}
                                        className={classes.chip}
                                        onDelete={handleDelete(item)}
                                    />
                                )),
                                onBlur,
                                onChange: event => {
                                    handleInputChange(event);
                                    onChange(event);
                                },
                                onFocus
                            },
                            inputProps
                        })}

                        {isOpen ? (
                            <Paper className={classes.paper} square>
                                {getSuggestions(inputValue2).map((suggestion, index) =>
                                    renderSuggestion({
                                        suggestion,
                                        index,
                                        itemProps: getItemProps({ item: suggestion.state }),
                                        highlightedIndex,
                                        selectedItem: selectedItem2
                                    })
                                )}
                            </Paper>
                        ) : null}
                    </div>
                );
            }}
        </Downshift>
    );
}

class autoCompleteState extends Component {
    constructor(props) {
        super(props);
        this.state = {
            SelectedState:'',
        }
       // this.showProfile = this.showProfile.bind(this)
    }

    render() {
        const { classes, } = this.props;
        return (
            <div>
                <DownshiftMultiple classes={classes} />
            </div>
        )
    }
}
export default withStyles(Styles)(autoCompleteState);

Answer 1

You can't and shouldn't access the context (this) of other components directly to update its state, especially not with a functional component.

What you have to do is pass a function as a prop to your DownshiftMultiple component which itself gets the value with which you want to update the state.

function DownshiftMultiple(props) {
    /* ... */
    function handleChange(item) {
        let newSelectedItem = [...selectedItem];
        if (newSelectedItem.indexOf(item) === -1) {
            newSelectedItem = [...newSelectedItem, item];
        }
        setInputValue("");
        setSelectedItem(newSelectedItem);
        this.props.onChange(newSelectedItem); // Use the new function prop
    }

    /* ... */
}

class autoCompleteState extends Component {
    /* ... */

    onDMChange = (newSelectedItem) => this.setState({ SelectedState: newSelectedItem });

    render() {
        const { classes, } = this.props;
        return (
            <div>
                <DownshiftMultiple classes={classes} onChange={this.onChange} />
            </div>
        )
    }
}

---

Also on a sidenote I would recommend to encapsulate your event handling functions inside your functional DownshiftMultiple component with the useCallback hook. Something like const newSelectedItem = [...selectedItem]; would always use the value that the state has been initialised with without a hook.

// For example your handle delete
const handleDelete = React.useCallback(item => () => {
    const newSelectedItem = [...selectedItem];
    newSelectedItem.splice(newSelectedItem.indexOf(item), 1);
    setSelectedItem(newSelectedItem);
}, [selectedItem]);

Answer 2

You pass on a handler to the child component, which it will invoke with the value to update and the update action happens in the parent

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 &&
            !inputValue.length &&
            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);
        props.setSelectedState(newSelectedItem);

    }

    const handleDelete = item => () => {
        const newSelectedItem = [...selectedItem];
        newSelectedItem.splice(newSelectedItem.indexOf(item), 1);
        setSelectedItem(newSelectedItem);
    };

    return (
        <Downshift
            id="downshift-multiple"
            inputValue={inputValue}
            onChange={handleChange}
            selectedItem={selectedItem}
        >
            {({
                getInputProps,
                getItemProps,
                getLabelProps,
                isOpen,
                inputValue: inputValue2,
                selectedItem: selectedItem2,
                highlightedIndex
            }) => {
                const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
                    onKeyDown: handleKeyDown,
                    // placeholder: "Select multiple State"
                });

                return (
                    <div className={classes.container}>
                        {renderInput({
                            fullWidth: true,
                            classes,
                            // label: "States",
                            InputLabelProps: getLabelProps(),
                            InputProps: {
                                startAdornment: selectedItem.map(item => (
                                    <Chip
                                        key={item}
                                        tabIndex={-1}
                                        label={item}
                                        className={classes.chip}
                                        onDelete={handleDelete(item)}
                                    />
                                )),
                                onBlur,
                                onChange: event => {
                                    handleInputChange(event);
                                    onChange(event);
                                },
                                onFocus
                            },
                            inputProps
                        })}

                        {isOpen ? (
                            <Paper className={classes.paper} square>
                                {getSuggestions(inputValue2).map((suggestion, index) =>
                                    renderSuggestion({
                                        suggestion,
                                        index,
                                        itemProps: getItemProps({ item: suggestion.state }),
                                        highlightedIndex,
                                        selectedItem: selectedItem2
                                    })
                                )}
                            </Paper>
                        ) : null}
                    </div>
                );
            }}
        </Downshift>
    );
}

class autoCompleteState extends Component {
    constructor(props) {
        super(props);
        this.state = {
            SelectedState:'',
        }
       // this.showProfile = this.showProfile.bind(this)
    }
    setSelectedState = (newState) => {
         this.setState({ SelectedState: newState });
    }
    render() {
        const { classes, } = this.props;
        return (
            <div>
                <DownshiftMultiple classes={classes} setSelectedState={this.setSelectedState}/>
            </div>
        )
    }
}
export default withStyles(Styles)(autoCompleteState);