Question 180930 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React script error while rendering external link by component

My component is

import React, { Component } from 'react';

export default class Porfolio extends Component {

  render() {
    let resumeData = this.props.resumeData;
    
    return (
      <section id="portfolio">
        <h3 className="portfolio-head">Checkout My Work</h3>
        <div className="portfolio-items">
          {resumeData.portfolio &&
            resumeData.portfolio.map((item) => (
              <div key={item.name} className="portfolio-item">
                <div className="item-wrap">
                  <img src={item.imgurl} alt={item.name} className="item-img" />
                  <div className="portfolio-item-overlay">
                    <div className="portfolio-item-details">
                      <h4 className='item-name'>{item.name}</h4>
                      <p>{item.description}</p>
                    </div>
                    <div className="portfolio-item-buttons">
                      {item.githubLink && (
                        <a href={item.githubLink} >
                          GitHub
                        </a>
                      )}
                      {item.projectLink && (
                        <a href={item.projectLink} >
                          Project
                        </a>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            ))}
        </div>

      </section>
    );
  }
}

It has github and project external links. When I click on them gets an error

Uncaught runtime errors:
ERROR
Script error.
    at handleError (http://localhost:3000/static/js/bundle.js:64898:58)
    at http://localhost:3000/static/js/bundle.js:64917:7

I even checked my app route and node version.
app.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header resumeData={resumeData}/>
        <About resumeData={resumeData}/>
        <Resume resumeData={resumeData}/>
        <Portfolio resumeData={resumeData}/>
        <ContactUs resumeData={resumeData}/>
        <Footer resumeData={resumeData}/>
      </div>
    );
  }
}

I tried using functional components and target="_blank" rel="noopener noreferrer" with links but nothing worked. Sometime it works other gets an error.

Tags:

2

Answers


  1. 0

    The error you are encountering might be due to the way you’re handling the external links in your React component. To open external links in a new tab, you should use the target="_blank" and rel="noopener noreferrer" attributes in your anchor tags.

    I will put an updated version of your Porfolio component with the modified anchor tags.

    import React, { Component } from 'react';

export default class Porfolio extends Component {
  render() {
    let resumeData = this.props.resumeData;

    return (
      <section id="portfolio">
        <h3 className="portfolio-head">Checkout My Work</h3>
        <div className="portfolio-items">
          {resumeData.portfolio &&
            resumeData.portfolio.map((item) => (
              <div key={item.name} className="portfolio-item">
                <div className="item-wrap">
                  <img src={item.imgurl} alt={item.name} className="item-img" />
                  <div className="portfolio-item-overlay">
                    <div className="portfolio-item-details">
                      <h4 className="item-name">{item.name}</h4>
                      <p>{item.description}</p>
                    </div>
                    <div className="portfolio-item-buttons">
                      {item.githubLink && (
                        <a href={item.githubLink} target="_blank" rel="noopener noreferrer">
                          GitHub
                        </a>
                      )}
                      {item.projectLink && (
                        <a href={item.projectLink} target="_blank" rel="noopener noreferrer">
                          Project
                        </a>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            ))}
        </div>
      </section>
    );
  }
}
    Login or Signup to reply.
  2. 0

    podrias probar usando react-router-dom

    import { Link } from "react-router-dom";
<Link  className="btn rounded"
       to={item.projectLink} >

    https://reactrouter.com/en/6.11.2

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search