Results Summary Component Main

With this activity I decided to test some basic knowledge of React. In the process I had to learn new methods, research and make my own code to achieve the goal.

One of the first problems was the import of the svg files, from the addresses provided in a json file:

[
  {
    "category": "Reaction",
    "score": 80,
    "icon": "./assets/images/icon-reaction.svg"
  },
  {
    "category": "Memory",
    "score": 92,
    "icon": "./assets/images/icon-memory.svg"
  },
  {
    "category": "Verbal",
    "score": 61,
    "icon": "./assets/images/icon-verbal.svg"
  },
  {
    "category": "Visual",
    "score": 72,
    "icon": "./assets/images/icon-visual.svg"
  }
]

To accomplish this I used the map() method with the Score component and positioned the SVGs in the PUBLIC folder to render them.

  {data.map((data) => {
    return <Score category={data.category} score={data.score} icon={data.icon} />;
    })
  }

In the Score component:

    <img className="score-icon" src={props.icon} alt={`${props.category.toLowerCase()}-icon`}/>

Finally, a reduce() method was used to calculate the total score by reading the data.json file.

function FinalScore(props) {
    return(
        <div className="result-score-container">
            <p className="result-score">
                {Math.floor(props.data.reduce((acc, curr) => acc + curr.score, 0) / props.data.length)}
            </p>
            <p className="of-100">
                of 100
            </p>
        </div>
    );
}