CODEWITHSUNDEEP
reactjshyperlink
Lara
Lara

Reputation: 3021

How to add onClick event in Link

I have below Link code in ReactJs for which trying to add onClick event which is not getting fired.

Functional stateless Component

export default function ResultChip({chipName, downloadTestResults}) {

return (
<Card className={classes.card}>
  <CardContent>   
    {
     chipName == "Download results" &&
     <Typography style ={{marginTop: 15, fontWeight: 3}}>
     <Link style={{ fontWeight: 2, color: '#087063', letterSpacing: '0.28' }} onClick={downloadTestResults}> {botTestAPIResult.uploadedFilename} </Link>
     </Typography>
    }
  </CardContent>
</Card>
);
}

and here is my ContainerComponent

import React, { Component } from 'react';

class ResultChip extends Component {
constructor(props) {
    super(props);
    this.state= {
    }  
    this.downloadTestResults = this.downloadTestResults.bind(this);   
 }

 downloadTestResults = (e) => {
    e.preventDefault();
    //Perform some action here    
 }

  render() {   
    return (
        <div>
        </div>
    )
   }
   }

Why my click event is not getting fired? Is some connectivity missing between component and Container? What's wrong?

Upvotes: 0

Views: 58

Answers (1)

thortsx
thortsx

Reputation: 2280

You export ResultChip like this:

export default function ResultChip({chipName, downloadTestResults}) {

return (
   <Card className={classes.card}>
      <CardContent>   
      {
        chipName == "Download results" &&
        <Typography style ={{marginTop: 15, fontWeight: 3}}>
        <Link onClick={downloadTestResults}> {botTestAPIResult.uploadedFilename}</Link>
        </Typography>
      }
      </CardContent>
   </Card>
);
}

Call ResultChip in your ContainerComponent:

import ResultChip from '...';

downloadTestResults = (e) => {
    e.preventDefault();
    //Perform some action here    
}
render() {
   return (
      <div>
         <ResultChip 
           downloadTestResults={this.downloadTestResults} 
           chipName={...}
         />
      </div>
   )
}

Upvotes: 1

Related Questions