无法在 React 中设置 null 的属性

Question

I have two elements that are supposed to appear depending on whether the condition is true or false but on one of them I need to use useRef hook but it doesn't work. Even though the element sometimes renders first, I still get the error Cannot set properties of null . I need to edit the second element's value when it renders with its reference but the code crashes so I can't do anything. Code looks like this:

inputRef.current.value="Some text"
{condition ? <SomeOtherComponent /> : <input type="text" ref={inputRef} />}

Answer 1

You have few options to fix that

1. Remove ref on input and set value directly by value={'Some text'} .
2. Render input and leave ref as it's but hide input by css based on condition.
3. Create useEffect with listener on condition and when condition is falsy set the current.value .