menu

Questions & Answers

ReactJS mapping issues

I'm in the Project component section of my portfolio and trying to connect the weblinks to my different projects.

            <div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
              {
              resumeData.portfolio && resumeData.portfolio.map((item) => {
                return(
                    <div className="columns portfolio-item">
                  <div className="item-wrap">
                    <a href="https://grocha78.github.io/Zesty-Investy-Calculonesty/"
                       >
                      <img src={`${item.imgurl}`} alt="" className="item-imgurl"/>
                      <div className="overlay">
                        <div className="portfolio-item-meta">
                          <h5>{item.name}</h5>
                          <p>{item.description}</p>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              )
            })
          } 

In my resumeData.js I have my four projects under the "portfolio" section

      {
        "name":"Zesty Investy",
        "description":"Investment calculator that helps plan finances for retirement",
        "imgurl":"/assets/zestyinvesty.png"
      },
      {
        "name":"Art Garage",
        "description":"The place that brings artists and potential buyers together.",
        "imgurl":"src/assets/artgarage.png"
      },
      {
        "name":"Tech Blog",
        "description":"A CMS-style blog site similar to a Wordpress site, where developers can publish their blog posts and comment on other developers’ posts as well.",  
        "imgurl":"src/assets/techblog.png"
      },
      {
        "name":"Weather App",
        "description":"Weather app that provides current and future weather forecasts in cities.",
        "imgurl":"src/assets/weatherapp.png"
      }
    ],

and my Project component has the section id as "portfolio"

Since I have the href="ZestyInvesty..." in the <a section I understand that the information that will come out on the webpage will only be the web link for Zesty Investy but it still shows the four different project information Portfolio on webpage. How can the web links for each project show individually? Thanks.

I've tried adding 4 different <a sections but this just shows 4 rows of the image shown in the pictures of my Portfolio section. I've added the weblink to the href section for each project and it does show only the 1 row that is currently seen but the links are all bunched together and it doesn't work. I'm not too sure on what to do next and I'd appreciate any help.

Comments:
2023-01-07 20:33:06
Please edit your question and add your code in a snippet instead of an image
2023-01-07 20:33:06
Welcome to SO. You might find reading the site help section useful when it comes to asking a good question, and this question checklist. Code that you have worked on to solve the problem should include a minimal reproducible example, and be included in your question, and not as images. Here's some documentation on how to create a React snippet.
Answers(0) :