Social Links Profile (React and Tailwind CSS)

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  Hi!

  No, the css hover effect is quite enough for this case. useState would be an overkill and an extra load on the app. But it's good that you're looking for various ways of implementation.

  And a couple of semantic suggestions. This is a list of links, so it's better to use ul and li tags here.

  <ul>
      <li><a href="#">It's a link here.</a></li>
      ...more links here
  </ul>
  

  If you are changing the display property of the ul or ol tags, you also need to add role="list" attribute to it.

  Also every page should contain main tag. For example you can use as root for app building.

  Hope that could help. Good luck =)

  Marked as helpful

  1

  ---

  

  Justin Levy•100

  @justinsanePosted 4 months ago

  @Alex-Archer-I Great suggestions. Thanks for making me aware of role="list". I refactored my code. See below.

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @justinsane

  Yes, that's right =)

  I want to warn you though about key values. It should be unique values which will definitely not change. Of course it is important mostly for the components which state could be changed, so it isn't a thing for this project, but it's good to keep that in mind.

  In real projects you'll often be work with data from the database, where every object has its own id. And sometimes you can't fully predict which part of the data could change, but it totally won't be an id. So it's a good habit (especially since you are already simulate array of data and you can add everything to it) to use id as key value.

  Sorry, if you are already aware about it, it's hard to tell who at what level here.

  Marked as helpful

  1

  

  Justin Levy•100

  @justinsanePosted 4 months ago

  @Alex-Archer-I good to know about key values, thanks!

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 4 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your solution looks great!

  📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

  Here's and example on how you can refactor your code:

  After Refactoring

  <ul class="list-container">
      <li><a href="#">Github</a></li>
      <li><a href="#">Frontend Mentor</a></li>
      <li><a href="#">LinkedIn</a></li>
      ...
  </ul>
  

  By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  1

  ---

  

  Justin Levy•100

  @justinsanePosted 4 months ago

  @danielmrz-dev Good recommendations. I refactored my code.

  function LinkTree() {
    return (
      <ul className='flex flex-col' role='list'>
        {Object.entries(links).map(([name, url]) => (
          <li
            key={name}
            className='text-center w-full h-full text-sm bg-grey rounded-md font-bold m-2 no-underline'
          >
            <a
              href={url}
              target='_blank'
              rel='noopener noreferrer'
              className='block w-full h-full p-3'
            >
              {name}
            </a>
          </li>
        ))}
      </ul>
    );
  }
  

  1