React useRef undefined inside list item

Question

I am building a custom dropdown with hooks and I ran into this issue in which the ref.current for the li elements rendered from an array is undefined. However, my other ref isn't. I'm sure I am doing something wrong, I just can't seem to pin point if it's losing or failing to bind the .current property.

I'm using styled-components, thus the naming convention.

How come input succesfully references the correct jsx element, but link is undefined?

I am exploring strategy to use keyboard navigation entirely with hooks, so if there are any suggestion, glad to hear them :D

const CustomDropdown({ handleCategoryClick, width }) => {
    const input = useRef();
    const link = useRef();

    useEffect(() => {
        input.current.focus();
    }, []);

    const toggleList = () => {
        if (isOpen) {
            setIsOpen(false);
            return;
        }
        setIsOpen(true);
        setOptions(dropdownOptions);
    };
return (
    return (
        <DDWrapper>
            <DropdownContainer>
                <InputContainer onClick={toggleList}>
                    <DropdownInput
                        ref={input}
                        name="customDropdown"
                        width={width}
                        isOpen={isOpen}
                        defaultValue={inputValue}
                        placeholder="Select a filter"
                    />
                </InputContainer>
            </DropdownContainer>
            {isOpen && (
                <DDList width={251} isOpen={isOpen} onClick={handleCategoryClick} role="navigation">
                    {options.map(({ label }, i) => (
                        <DDItem
                            id="item"
                            onKeyDown={handleKeyDown}
                            onClick={hideList}
                            data-value={label}
                            key={i}
                            width={width}
                            ref={link}
                        >
                            {label}
                        </DDItem>
                    ))}
                </DDList>
            )}
        </DDWrapper>
    );

@BrianLe got it! Thanks, any alternative methods to achieve the desired results, you can suggest? — aromanarguello, Mar 14 '19 at 20:50
You can create an array of refs like in this question: https://stackoverflow.com/questions/54940399/how-target-dom-with-react-useref-in-map — Brian Le, Mar 14 '19 at 20:53
Awesome! will start exploring it! if you want to add it as answer :) — aromanarguello, Mar 14 '19 at 20:54
If it doesn't help, I will dive into it a bit further. Posting an answer with just a link is tedious — Brian Le, Mar 14 '19 at 20:55
@BrianLe Amazing! Solved my issue thank you so much :) I would vote this as accept the answer if you put it up thanks again! I'm very interested in learning why this is :) — aromanarguello, Mar 14 '19 at 21:35
Okay, glad to help. I will mark this question as duplicate then — Brian Le, Mar 14 '19 at 21:40
@BrianLe, I don't get it though. How come I can `console.log(link)` and get the array of refs, but if I try to access them, they are null — aromanarguello, Mar 14 '19 at 21:47
For instance, if I `console.log(link)` I receive an array of 7 objects like this: `[{current: li.sc-uJMKN.jrOnyn}]`, but if I try to access that ref, say `link[0]` it comes back as undefined, or even if I do `link[0].current` @BrianLe — aromanarguello, Mar 14 '19 at 21:52
Hmm, weird. I think you should open another question and add a sandbox with it — Brian Le, Mar 14 '19 at 21:58

React useRef undefined inside list item

0 Answers0