CODEWITHSUNDEEP
javascriptreactjsbuttonhyperlinkreact-router-dom
Mozarts
Mozarts

Reputation: 61

using react-router-dom links with butttons


<Link to='https://www.gofundme.com/f/moorhead-mosque-foundation'><Button type="button" className="btn btn-info">Button</Button></Link>

What other ways can I use links and buttons together?, I'm putting this button inside a carousel. I have seen other people use onCLick() { window.open('something') } and passed it as a prop to the button. I have this button inside of an array so I can't do that. How can I get this button to go to the goFundMe above when I click on it?

Upvotes: 0

Views: 74

Answers (3)

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

as people write in the commnet there is no really use onf a button inside a link there just add

display:block;
text-decoration:none

and you can control how the a tag will look like

Upvotes: 0

Richard Ochom
Richard Ochom

Reputation: 556

Create a function doSomething that takes a value an call that value whenever the button is clicked

class PageView extends React.Component{
  doSomething=(link)=>{
    this.props.history.push(link);
  }
  render(){
  return(
   data_array.map((data,index)=>
   <div key={index} id="carousel">
    <Button onClick{()=>this.doSomething(data.link)}>MY BUTTON</Button>
   </div>)
  )}
}

Upvotes: 0

Rahmat Anjirabi
Rahmat Anjirabi

Reputation: 968

try this way:

class Panel extends React.Component {
  constructor(props){
    super(props);
    this.state = { arr: [{key: 1}, {key: 2}] }
  }
//...
onBtnClick = (key) => { //.. }

render(){
    return ( 
      this.state.arr.map(item => 
         <Link to='..'>
           <Button onclick={()=>this.onBtnClick(item.key)}>Button</Button>
         </Link>
))}

Upvotes: 1

Related Questions