Working on a tutorial atm that involves react material-ui tables that also has a search input textfield. What I am trying to add to it, is a button that will reset the table report but also clear the search input textfield.

It is the clearing of the search textfield that I am having trouble with.

They are using this code as a separate ponent library called Controls.input:

import React from 'react' import { TextField } from '@material-ui/core';

export default function Input(props) {

    const { name, label, value,error=null, onChange, ...other } = props;
    return (
        <TextField
            variant="outlined"
            label={label}
            name={name}
            value={value}
            onChange={onChange}
            {...other}
            {...(error && {error:true,helperText:error})}
        />
    )
}

The main search code is as follows where I have also added a button

            <Controls.Input
                id="name"
                label="Search Name"
                className={classes.searchInput}
                InputProps={{
                    startAdornment: (<InputAdornment position="start">
                        <Search />
                    </InputAdornment>)
                }}
                onChange={handleSearch}
            />
            <Button
                onClick={handleClear}
                className="materialBtn"
            >
                Clear
            </Button>

At this point, I am not sure how to reference/target the search input field as part of the handleClear function, in-order to clear it's contents?

const handleClear = () => {
    ????
}    

Do I need to use useState()?

Working on a tutorial atm that involves react material-ui tables that also has a search input textfield. What I am trying to add to it, is a button that will reset the table report but also clear the search input textfield.

It is the clearing of the search textfield that I am having trouble with.

They are using this code as a separate ponent library called Controls.input:

import React from 'react' import { TextField } from '@material-ui/core';

export default function Input(props) {

    const { name, label, value,error=null, onChange, ...other } = props;
    return (
        <TextField
            variant="outlined"
            label={label}
            name={name}
            value={value}
            onChange={onChange}
            {...other}
            {...(error && {error:true,helperText:error})}
        />
    )
}

The main search code is as follows where I have also added a button

            <Controls.Input
                id="name"
                label="Search Name"
                className={classes.searchInput}
                InputProps={{
                    startAdornment: (<InputAdornment position="start">
                        <Search />
                    </InputAdornment>)
                }}
                onChange={handleSearch}
            />
            <Button
                onClick={handleClear}
                className="materialBtn"
            >
                Clear
            </Button>

At this point, I am not sure how to reference/target the search input field as part of the handleClear function, in-order to clear it's contents?

const handleClear = () => {
    ????
}    

Do I need to use useState()?

• javascript
• reactjs
• material-ui
• use-state

• You will have to clear the value of text input. You can useState to keep the value and clear it in handleClear function . – Bhaskar Joshi Commented Jun 12, 2021 at 10:07
• @BhaskarJoshi - sorry, how can I access the value of the text input inorder to use useState? – ArthurJ Commented Jun 12, 2021 at 10:18
• stackoverflow./questions/69257278/… – Ievgen Commented Jun 30, 2022 at 22:14

1 Answer 1

You are right with having to put the value into state. Based on what you have supplied it seems that your state needs to be in your parent ponent. So something like this should work

import { useState } from 'react'

const ParentComponent = () => {
    const [value, setValue] = useState('')

    const handleClear = () => {
        setValue('')
    }

    const handleSearch = (event) => {
        setValue(event.target.value)
    }

    return (
        <>
            <Controls.Input
                id="name"
                label="Search Name"
                className={classes.searchInput}
                value={value}
                onChange={handleSearch}
                InputProps={{
                    startAdornment: (
                        <InputAdornment position="start">
                            <Search />
                        </InputAdornment>
                    ),
                }}
                
            />
            <Button onClick={handleClear} className="materialBtn">
                Clear
            </Button>
        </>
    )
}