using react-router-dom links with butttons

Question


<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?

Why do you need a button inside of `Link`? `Link` is basically an `` — SakoBu, Jul 15 '20 at 19:46
Check this answer maybe, this might help : https://stackoverflow.com/a/44563899 — Manu Sharma, Jul 15 '20 at 19:54

score 1 · Answer 1 · answered Jul 15 '20 at 20:47

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>
))}

score 0 · Answer 2 · answered Jul 15 '20 at 20:55

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>)
  )}
}

score 0 · Answer 3 · answered Jul 16 '20 at 16:31

0

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

answered Jul 16 '20 at 16:31

TalOrlanczyk

786
3
14

using react-router-dom links with butttons

3 Answers3