How to make Link fit Component that its inside of it?

0

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.

javascript css reactjs react-router

share|improve this question

asked Nov 19 '18 at 11:43

Vencovsky

759

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Buttons are not permitted as children of links.
  – Paulie_D
  Nov 19 '18 at 11:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  You could try onClick with the button.
  – MrMaavin
  Nov 19 '18 at 11:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Just replace the link with an onClick in the button. React Router provides props which will let you "push" to a new url
  – Charlie
  Nov 19 '18 at 11:49
  

  
  
  
  

add a comment | 

0

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.

javascript css reactjs react-router

share|improve this question

asked Nov 19 '18 at 11:43

Vencovsky

759

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Buttons are not permitted as children of links.
  – Paulie_D
  Nov 19 '18 at 11:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  You could try onClick with the button.
  – MrMaavin
  Nov 19 '18 at 11:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Just replace the link with an onClick in the button. React Router provides props which will let you "push" to a new url
  – Charlie
  Nov 19 '18 at 11:49
  

  
  
  
  

add a comment | 

0

0

0

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.

javascript css reactjs react-router

share|improve this question

asked Nov 19 '18 at 11:43

Vencovsky

759

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.

javascript css reactjs react-router

javascript css reactjs react-router

share|improve this question

asked Nov 19 '18 at 11:43

Vencovsky

759

share|improve this question

asked Nov 19 '18 at 11:43

Vencovsky

759

share|improve this question

share|improve this question

asked Nov 19 '18 at 11:43

Vencovsky

759

asked Nov 19 '18 at 11:43

Vencovsky

759

asked Nov 19 '18 at 11:43

Vencovsky

759

759

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Buttons are not permitted as children of links.
  – Paulie_D
  Nov 19 '18 at 11:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  You could try onClick with the button.
  – MrMaavin
  Nov 19 '18 at 11:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Just replace the link with an onClick in the button. React Router provides props which will let you "push" to a new url
  – Charlie
  Nov 19 '18 at 11:49
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Buttons are not permitted as children of links.
  – Paulie_D
  Nov 19 '18 at 11:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  You could try onClick with the button.
  – MrMaavin
  Nov 19 '18 at 11:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Just replace the link with an onClick in the button. React Router provides props which will let you "push" to a new url
  – Charlie
  Nov 19 '18 at 11:49
  

  
  
  
  

Buttons are not permitted as children of links.
– Paulie_D
Nov 19 '18 at 11:45

Buttons are not permitted as children of links.
– Paulie_D
Nov 19 '18 at 11:45

You could try onClick with the button.
– MrMaavin
Nov 19 '18 at 11:46

You could try onClick with the button.
– MrMaavin
Nov 19 '18 at 11:46

Just replace the link with an onClick in the button. React Router provides props which will let you "push" to a new url
– Charlie
Nov 19 '18 at 11:49

Just replace the link with an onClick in the button. React Router provides props which will let you "push" to a new url
– Charlie
Nov 19 '18 at 11:49

add a comment | 

3 Answers
3

active

oldest

votes

1

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>

share|improve this answer

answered Nov 19 '18 at 11:54

Charlie

1846

add a comment | 

1

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.

share|improve this answer

edited Nov 19 '18 at 12:08

answered Nov 19 '18 at 11:59

Rohan Dhar

947316

add a comment | 

0

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.

share|improve this answer

answered Nov 19 '18 at 11:52

vssadineni

379110

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373923%2fhow-to-make-link-fit-component-that-its-inside-of-it%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

1

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>

share|improve this answer

answered Nov 19 '18 at 11:54

Charlie

1846

add a comment | 

1

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>

share|improve this answer

answered Nov 19 '18 at 11:54

Charlie

1846

add a comment | 

1

1

1

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>

share|improve this answer

answered Nov 19 '18 at 11:54

Charlie

1846

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>

share|improve this answer

answered Nov 19 '18 at 11:54

Charlie

1846

share|improve this answer

share|improve this answer

answered Nov 19 '18 at 11:54

Charlie

1846

answered Nov 19 '18 at 11:54

Charlie

1846

answered Nov 19 '18 at 11:54

Charlie

1846

1846

add a comment | 

add a comment | 

1

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.

share|improve this answer

edited Nov 19 '18 at 12:08

answered Nov 19 '18 at 11:59

Rohan Dhar

947316

add a comment | 

1

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.

share|improve this answer

edited Nov 19 '18 at 12:08

answered Nov 19 '18 at 11:59

Rohan Dhar

947316

add a comment | 

1

1

1

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.

share|improve this answer

edited Nov 19 '18 at 12:08

answered Nov 19 '18 at 11:59

Rohan Dhar

947316

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.

share|improve this answer

edited Nov 19 '18 at 12:08

answered Nov 19 '18 at 11:59

Rohan Dhar

947316

share|improve this answer

share|improve this answer

edited Nov 19 '18 at 12:08

edited Nov 19 '18 at 12:08

edited Nov 19 '18 at 12:08

answered Nov 19 '18 at 11:59

Rohan Dhar

947316

answered Nov 19 '18 at 11:59

Rohan Dhar

947316

answered Nov 19 '18 at 11:59

Rohan Dhar

947316

947316

add a comment | 

add a comment | 

0

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.

share|improve this answer

answered Nov 19 '18 at 11:52

vssadineni

379110

add a comment | 

0

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.

share|improve this answer

answered Nov 19 '18 at 11:52

vssadineni

379110

add a comment | 

0

0

0

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.

share|improve this answer

answered Nov 19 '18 at 11:52

vssadineni

379110

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.

share|improve this answer

answered Nov 19 '18 at 11:52

vssadineni

379110

share|improve this answer

share|improve this answer

answered Nov 19 '18 at 11:52

vssadineni

379110

answered Nov 19 '18 at 11:52

vssadineni

379110

answered Nov 19 '18 at 11:52

vssadineni

379110

379110

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373923%2fhow-to-make-link-fit-component-that-its-inside-of-it%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here