I am trying to input 18 scores for 18 different holes in a golf app, currently The input field name is dynamically updated and when you click the next or prev button the holeIndex is incremented by 1 or reduced by1.

On page load, I fill the scoreCardObj with the players current scores that are held in the database (If any exist, otherwise the input is blank) I want the value to match the value for the field in scoreCardObj so when I am inputting the score for Hole 4, the input name will be h4Score and I want the value to be that of scoreCardObj.h4Score but I need the 4 to be the value of the holeIndex+1 so something like scoreCardObj.h${holeIndex+1}Score SO far I can only get it to return the string "scoreCardObj.h1Score" if holeIndex is 0 then it changes to "scoreCardObj.h2Score" when I move to the next hole.

Below is the input value I want to have for the first hole and then it dynamically changes to h2Score when I move to the next hole.

 <div id='score-entry'>
  <h2 >Hole {holeIndex+1}</h2>
  <input name={`h${holeIndex+1}Score`} value={scoreCardObj.h1Score} onChange={onChangeScoreCard} type="number" min={"1"} max={"15"}></input>
  <p style={{color:"red"}}>Please enter gross scores</p>
 </div>