React로 영어 단어 맞추기(laravel)

/english.json

{
	"lung" : "폐의",
	"claw" : "발톱",
	"hesitate" : "주저하다",
	"come up with" : "만들어 내다",
	"humble" : "겸손한"
}

resources/js/components/Words.js

import React from 'react';
import ReactDOM from 'react-dom';
import { useState } from 'react'
import objectData from '/english.json'

function Words() {

	const [keyIndex, setKeyIndex] = useState(-1)
	const [valueIndex, setValueIndex] = useState(-1)
	const [isKey, isSetKey] = useState(false)
	const [isValue, isSetValue] = useState(false)

	const keys = Object.keys(objectData)

	const keyClick = () => {
		const index = Math.floor(Math.random() * keys.length)
		setKeyIndex(index)
		isSetKey(true)
		isSetValue(false)
		
	}

	const valueClick = () => {
		const value = (Object.keys(objectData)[keyIndex])
		setValueIndex(keyIndex)
		isSetKey(false)
		isSetValue(true)
	}
	return (
		<div className="container">
			<button className="btn btn-primary" onClick={keyClick}>Key</button> &nbsp;&nbsp;
			<button className="btn btn-primary" onClick={valueClick}>Vaule</button>
			
			<div className="result">
				{isKey && <span>Key : {Object.keys(objectData)[keyIndex]}</span>}
				{isValue && <span>Value : {Object.values(objectData)[valueIndex]}</span>}
			</div>
		</div>
	)

}

export default Words;

ReactDOM.render(<Words />, document.getElementById('words'));

resources/js/app.js

require('./components/Words');

resources/views/main.blade.php

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<div id="words"></div>
<script src="{{ asset('js/app.js') }}"></script>

결과
Key버튼 클릭:
value 버튼 클릭: