React useRef return undefined error when trying to set the input property

Question

I have used useRef hook from react

const myInput = useRef()

And pass it to material-ui OutlinedInput component

<OutlinedInput
  id="outlined-adornment-amount"                                      
  inputRef={myInput}
  type="file"                                            
  startAdornment={<InputAdornment position="start">
                   <FolderIcon fill="#333" />
                    </InputAdornment>}
                      labelWidth={60}
    />

when I try to set the input's property in within useEffect

  useEffect(() => {
        myInput.current.directory = true
    }, [])

I get

Uncaught TypeError: Cannot set property 'directory' of undefined

Yeah, this can happen because your useEffect came in before the component, you can try to add myInput?.current.directory = true or myInput && myInput.current.directory = true — Fried noodles
– Fried noodles, Commented Jan 15, 2021 at 9:01
Try this if (myInput.current) { myInput.current.directory = true } — Naren
– Naren, Commented Jan 15, 2021 at 9:29
@Fried noodles I'm getting error 'incorrect left-hand side in assignment expression' — Sai Krishna
– Sai Krishna, Commented Jan 15, 2021 at 9:48

syllmz · Accepted Answer · 2021-01-15 09:35:19Z

1

I can't see any problem with your code. I tested and everything works fine. Check out this:

https://codesandbox.io/s/hardcore-kare-u5rgm

answered Jan 15, 2021 at 9:35

syllmz

881 silver badge7 bronze badges

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

2 Comments

Sai Krishna Over a year ago

The attribute isn't setting tho. It still behaves as a file selector than a folder selector. I have even tried myInput.current.setAttribute('webkitdirectory', ''); still not working

Paul Pacurar Over a year ago

sandbox expired

Paul Pacurar · Accepted Answer · 2021-12-31 15:22:01Z

0

I had exactly the same issue. In my project there were several MUI components and the input was on a modal. In my case what worked was to use a timeout. Not sure if it's the best solution, but it works:

  const myInputRef = useRef();
....
  useEffect(() => {
    setTimeout(() => {
      myInputRef.current.focus();
    }, 0);
  }, []);

answered Dec 31, 2021 at 15:22

Paul Pacurar

1872 silver badges14 bronze badges

Comments

Mohamadreza Kazemian · Accepted Answer · 2022-12-08 15:45:49Z

0

maybe it's because the input you used is not actually the input. I think if you log your ref you would have 2 children.

answered Dec 8, 2022 at 15:45

Mohamadreza Kazemian

3012 silver badges9 bronze badges

Collectives™ on Stack Overflow

React useRef return undefined error when trying to set the input property

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest