Need TextField to update text after state is changed

Question

I need to make a small change to a textfield. Basically there is a reset button that clears the search. The user can write the search string in the TextField. But the clear function only resets the actual search, but not the TextField which then still contains some kind of search string the user have written.

interface DrawerContainerProps {
    dataProfile: DataProfile;
}

interface DrawerContainerComponentProps extends DrawerContainerProps, WithStibStyles<typeof styles>, WithNamespaces {
}

interface DrawerCantainerState {
    attributeSearchText: string;
}

class ProfileDrawerContainerComponent extends React.Component<DrawerContainerComponentProps, DrawerCantainerState> {
    readonly state: Readonly<DrawerCantainerState> = {
        attributeSearchText: ""
    };

    setAttributeSearchText = debounce((searchText) => this.setState({ attributeSearchText: searchText }), 200);

    onSearch = (event: React.ChangeEvent<HTMLInputElement>) => this.setAttributeSearchText(event.target.value);

    clearSearch = () => this.setAttributeSearchText("");

    render() {
        const { classes, dataProfile, t } = this.props;

        return (
            <Drawer
                variant="permanent"
                classes={{ paper: classes.drawerPaper }}>
                <div className={classes.toolbar} />
                <div className={classes.menu}>
                    <Typography className={classes.drawerTitle}>{t("drawer.objectType", { defaultValue: "Object Type Filter" })}</Typography>
                    <div className={classes.objectTypes}>
                        {dataProfile && <ObjectTypeDrawer
                            objectTypes={dataProfile.profiledObjectTypes}
                            objectCount={dataProfile.objectCount}
                            businessConditionFiltering={dataProfile.businessConditionFilteringResult} />}
                    </div>
                    <div className={classes.attributeTitleSearch}>
                        <Typography className={classes.drawerTitle}>{t("drawer.attributes", { defaultValue: "Attributes" })}</Typography>
                        <TextField
                            id="attribute-search"
                            placeholder={t("drawer.search", { defaultValue: "Search" })}
                            type="search"
                            className={classes.searchField}
                            onChange={this.onSearch }
                        />
                    </div>
                    <div className={classes.attributes}>
                        <AttributesDrawer attributeFilter={this.state.attributeSearchText} sendFunction={this.clearSearch} />
                    </div>
                </div>
            </Drawer>
        );
    }
}

My knowledge of web programming is very elementary. But I suspect that whenever the clearSearch function is called, it also has to update the value of the TextField. But that is where my knowledge of React and state handling comes short. Hope someone can give a hint.

Answer 1

You need to 'control' the value of your TextField. That is

                        <TextField
                            id="attribute-search"
                            placeholder={t("drawer.search", { defaultValue: "Search" })}
                            type="search"
                            className={classes.searchField}
                            onChange={this.onSearch }
                            value={this.state.attributeSearchText}
                        />