I have a requirement to show thumbnails of videos(cards) in several rows and focus on the very first thumbnail. I did the display using Nested Map. The code basically iterates over a videos array and returns videos in several rows.

How do we focus on the first element that renders? I think we need to get ref of the first element to focus. But how do we set ref here and reference it in another function?

const CategoryGrid = props => {
  return (
    <HotKeys handlers={handlers}>
      <div className="grid-container">
        <p className="title"> {props.title.toUpperCase()} </p>
        <div className="grid">
          {
            props.videos.map((rowvideos,index) => {
                var rowVideoArr = [];
                rowvideos.map((video,key)=>{
                  rowVideoArr.push(<div  key={video.id} className="fleft card-container grow">
                    <Card key={video.id} title={video.name} background={video.thumbnailUrl}/>
                  </div>)
                })
                return(<div className="row" key={index}>{rowVideoArr}</div>)
            })
          }
        </div>
      </div>
    </HotKeys>
  );
}

I have a requirement to show thumbnails of videos(cards) in several rows and focus on the very first thumbnail. I did the display using Nested Map. The code basically iterates over a videos array and returns videos in several rows.

How do we focus on the first element that renders? I think we need to get ref of the first element to focus. But how do we set ref here and reference it in another function?

const CategoryGrid = props => {
  return (
    <HotKeys handlers={handlers}>
      <div className="grid-container">
        <p className="title"> {props.title.toUpperCase()} </p>
        <div className="grid">
          {
            props.videos.map((rowvideos,index) => {
                var rowVideoArr = [];
                rowvideos.map((video,key)=>{
                  rowVideoArr.push(<div  key={video.id} className="fleft card-container grow">
                    <Card key={video.id} title={video.name} background={video.thumbnailUrl}/>
                  </div>)
                })
                return(<div className="row" key={index}>{rowVideoArr}</div>)
            })
          }
        </div>
      </div>
    </HotKeys>
  );
}

• javascript
• reactjs
• ref

• maybe set it inside a lookup table? ref => this.videosRefs[key] = ref? – Sagiv b.g Commented Dec 14, 2017 at 18:41

2 Answers 2

Maybe use a lookup table object or an array and store all the refs there by their index (or id).
Then when the component is mounted, you can trigger the focus event on the first one (or any other one by the key or id).

Simple example with inputs:

const videos = [
  { name: 'video 1' },
  { name: 'video 2' },
  { name: 'video 3' },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.videoRefs = [];
  }

  componentDidMount() {
    this.videoRefs[0] && this.videoRefs[0].focus();
  }

  render() {
    return (
      <div >
        {
          videos.map((video, index) => (
            <input
              key={index}
              value={video.name}
              ref={ref => this.videoRefs[index] = ref}
            />
          ))
        }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Hello react hook here I hope this helps you can target the first element using tabIndex.

    const elementRef = useRef();

    useEffect(() => {

        if (elementRef.current.tabIndex === 0) {

            elementRef.current.click();

        }

    }, []);


    return (
        
        <div tabIndex={index} ref={elementRef} id={`${activeLink === index ? "selected" : ""}`}

        </div>

    )