Submitted over 1 year ago

Challenge 2: Results summary challenge using React

Alexej Kunz•60

@Orchi1904

Preview site View code

This is a solution for...Results summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my second challenge. It took me a little longer than I thought because I had problems showing the icons whose path is stored in the JSON file. They just never appeared so I had to create my own Icon component and they finally appeared. It would be nice if you could help me figure out why the icons are not shown when I try to read the path from the JSON file like this:

{
            data.map((data, i) => (
              <div>
                <img src={data.icon} alt={data.category} />
                <ScoreComponent key={i} category={data.category} score={data.score} maxScore="100" />
              </div>
            ))
          }

If I do it like that it only shows the alt text.

Anyway, it was a lot of fun to complete this challenge. I am happy for every feedback.

Thanks in advance and happy coding!

Community feedback

visualdennis•8,375
@visualdennissPosted over 1 year ago
Hey,

Congrats on successfully completing the challenge! It looks great.

Regarding JSON and Path: It looks like you had your images in the src/assets. Instead try to move all your images to a folder in public, e.g. public/assets then in JSON:

{ "title": "something", "image_link": "../assets/yourfilename1.jpg" }, { "title": "something2", "image_link": "../assets/yourfilename2.jpg" }

should let you access those images. ../ refers to public, so ../assets refers to public/assets.

Then to make use of JSON Data locally, u can try packages like json-loader, which then allows you to import like:

import data from './data.json'

Maybe they are other alternatives to retrieve JSON locally or simply unneeded, but in case of JSON the path starts from public, instead of where you .json file is located.

Hope this was helpful!
Marked as helpful
2
Alexej Kunz•60
@Orchi1904Posted over 1 year ago
@visualdenniss Thanks for your help, it finally works as it should! I already tried to move the images to the public folder but I did not know that ../ refered to the public directory, thats why it did not work for me back than.
0
visualdennis•8,375
@visualdennissPosted over 1 year ago
@Orchi1904 Yea paths are always tricky on react, but glad it solved your problem! Good luck on upcoming challenges!
0
Alexej Kunz•60
@Orchi1904Posted over 1 year ago
Another thing I see is that my solution that is displayed at the design comparison is not centered at all while it is centered if you click on the preview site. I guess it might be some error here on frontendmentor, because I also could not find any solution so far that is centered in the design comparison.
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord