import React, {useState, useEffect, useRef} from "react"; const RenderOption = ({...props}) => { const {name, isMatchingPair, selected, onClick} = props; return ( ) } const isMatchingPairSelected = (selected, data) => { return (data[selected[0]] && data[selected[0]] === selected[1]) || (data[selected[1]] && data[selected[1]] === selected[0]) } const getRandomizedOptions = (data) => { const orderedArray = Object.keys(data).reduce((res, k) => { res.push(k, data[k]); return res; }, []); const unorderedArray = new Array(); while(unorderedArray.length !== orderedArray.length){ const randomOption = orderedArray[Math.floor(Math.random()*orderedArray.length)] if(!unorderedArray.includes(randomOption)){ unorderedArray.push(randomOption) } } return unorderedArray; } const Game = ({ ...props}) => { const {data} = props; const [options, setOptions] = useState(getRandomizedOptions(data)); const [selected, setSelected] = useState([]); const [isMatchingPair, setIsMatchingPair] = useState(false); const [counter, setCounter] = useState(0); const counterRef = useRef(null); useEffect(() => { if(isMatchingPair){ setTimeout(() => { setIsMatchingPair(false); }, 1000) } else { let newOptions = [...options]; if(selected.length > 1 && isMatchingPairSelected(selected, data)){ newOptions = newOptions.filter((option) => !selected.includes(option)) setOptions(newOptions); setSelected([]); setIsMatchingPair(false); } else if(selected.length > 1) { setTimeout(() => { setIsMatchingPair(false); setSelected([]); }, 1000); } } }, [isMatchingPair, selected]); useEffect(() => { if(!options.length){ clearInterval(counterRef.current); } }, [options]); const handleSelection = (option) => { if(counter <= 0 && !counterRef.current){ counterRef.current = setInterval(() => { setCounter(ctr => ctr+1); }, 1000); } let newSelected = [...selected]; if (newSelected.includes(option)){ newSelected = newSelected.filter(op => op !== option); } else if(newSelected.length < 2){ newSelected.push(option) } if (isMatchingPairSelected(newSelected, data)){ setIsMatchingPair(true); } else if(newSelected.length > 1) { setIsMatchingPair(false); } setSelected(newSelected) } const handleGameReset = () => { setOptions(getRandomizedOptions(data)); setSelected([]); setIsMatchingPair(false); counterRef.current = null; setCounter(0); } return (

1 ? "red" : selected.length > 0 ? "blue" : "gray"}`}}>Find Matching Pairs

1 ? "red" : selected.length > 0 ? "blue" : "gray"}` }}> {counter || "Timer starts when you select first option"}

{options.length ? options.map(option => ) :

{`Congratulations! You completed the challange in ${counter} seconds`}

}

) } export default Game;

Do you see value in our efforts?

Build Country Capital Game | Microsoft Frontend Interview Question | JavaScript | React.js

@Himanshu