import React from "react";
 
import Item from "./Item";
import useRovingFocus from "use-roving-focus";
import characters from "./onePunchManCharacters";
 
const List = () => {
  const [focus, setFocus] = useRovingFocus(characters.length);
 
  return (
    <ul>
      {characters.map((character, index) => (
        <Item
          key={character}
          setFocus={setFocus}
          index={index}
          focus={focus === index}
          character={character}
        />
      ))}
    </ul>
  );
};
 
export default List;

import React, { useEffect, useRef, useCallback } from "react";
 
const Item = ({ character, focus, index, setFocus }) => {
  const ref = useRef(null);
 
  useEffect(() => {
    if (focus) {
      // Move element into view when it is focused
      ref.current.focus();
    }
  }, [focus]);
 
  const handleSelect = useCallback(() => {
    alert(`${character}`);
    // setting focus to that element when it is selected
    setFocus(index);
  }, [character, index, setFocus]);
 
  return (
    <li
      tabIndex={focus ? 0 : -1}
      role="button"
      ref={ref}
      onClick={handleSelect}
      onKeyPress={handleSelect}
    >
      {character}
    </li>
  );
};
 
export default Item;