Cannot change text value of input element

Question

I'm learning React so sorry if the question is silly. Anyway, I'm trying to change the text of an Input element if the filtered variable is null, so I did:

const contactContext = useContext(ContactContext);
const text = useRef<HTMLInputElement>(null);

const { filterContacts, clearFilter, filtered } = contactContext;

useEffect(() => {
    if (filtered === null) {
        text.current?.value = '';
    }
});

but on this line: text.current?.value = '';

I get:

The left-hand side of an assignment expression may not be an optional property access.

what I did wrong?

UPDATE

return (
        <form>
            <input
                ref={text}
                type="text"
                placeholder="Filter Contacts..."
                onChange={onChange} />
        </form>
    )

@AgustinMoles I have update the question showing the input return — sfarzoso
– sfarzoso, Commented Oct 9, 2020 at 13:34
The error is literally telling you to change text.current?.value = ''; to if(text.current){ text.current.value = ''; }. Whether or not it's necessary to use a ref is different matter. — spender
– spender, Commented Oct 9, 2020 at 13:37

Yousaf · Accepted Answer · 2020-10-09 13:57:57Z

4

Error message is pretty clear about what's wrong in your code.

Optional-chaining is not valid on the left-hand side of the assignment statement and you get this error because of the following statement in the useEffect hook

text.current?.value = '';

You can only use optional-chaining on the right-hand side of an assignment.

You can replace your optional-chaining code to an if statement

if (text.current) {
   text.current.value = '';
}

edited Oct 9, 2020 at 13:57

answered Oct 9, 2020 at 13:35

Yousaf

29.6k6 gold badges54 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

Cannot change text value of input element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related