从React.js中的状态数组渲染特定值

Question

I am creating an online scorecard application for a 9-hole golf course using React.js, State, and rendering. A user enters his or her score for each hole, which 'pushes' hole number & hole score to an array (known as golferOneScore) in the State. Rendering to the browser is proving difficult, though, for display of each hole's score in attempting to render via map method based on value of hole in the array...

I've tried mapping out the array (specifically for one hole number) in my html area. It works, but doing so, though, is limiting display to only one hole per map. Upon time to map for the score on hole 2, I'm losing display of my entry in the browser for hole 1.

{this.state.golferOneScore.map((data) =>  {
    if (data.hole == 1) { 
        return (<tr><td>golferOne</td><td>{data.score}</td></tr>)
        })};

Expecting to display in all 9 holes of scores accurately, even if a golfer should, for any reason, skip a hole.

Answer 1

Learned I could simply use a find method for each hole golfed

{this.state.nameOneScore.find(scores => scores.hole === '1').score}

ternary condition to control for null is important, too.