What I have:

<div className="flexBox">

    <h4>Rampa de Cores</h4>

    <Link to={"/new"} className="link">

        <CustomButton label="Adicionar" className={"addButton"}/>

    </Link>

</div>

And the <CustomButton /> returns

<div>

    <button className={this.props.className}>{this.props.label}</button>

</div>

The Problem:

All the area that i marked with a red square is clickable and triggers the <Link /> but I need to make it fit the button area only.

What I tried:

I looked for how to make a div fit it's content, in .link I have

.link {

  display: inline-block;

}

but didn't work.

What i need:

1. How to make <Link /> fit it's content?


2. Or make a better way of triggering <Link /> using the button.

React Router provides a history prop to components.

You can replace your link and include an onClick in the button.

<div className="flexBox">

    <h4>Rampa de Cores</h4>

    <CustomButton 

      onClick={() => this.props.history.push('/new')} 

      label="Adicionar" 

      className={"addButton"}

    />

</div>

You should not use button as a child of Link. Instead, you may use button and trigger a state change or redirection when the button is clicked. If the new route is declared with react-router-dom's Route, you may just use the following code:

down vote
favorite
What I have:

 <div className="flexBox">

        <h4>Rampa de Cores</h4>

        <Link to={"/new"} className="link">

            <CustomButton label="Adicionar" className={"addButton"}

onButtonClick={()=>this.props.history.push('/new')}/>

        </Link>

</div>

  <button

 onClick={this.props.onButtonClick}

>{this.props.label}</button>

If your current component is not defined with Route, you must use withRouter from react-router-dom to get access to the history prop.

you can use below flex box styling or else simply make .link display:block; width:100%;

.link{

    display:flex;

    flex-flow:row wrap;

    flex-basis:50%;

    min-width:50%;

    line-height:normal;

}

As far as height is concerned if the parent .flexbox display property is flex then height will be picked automatically.