Button code examples in React

//

import { Link } from 'react-router-dom';

export default function BtnContact() {

return (

<Link to='/' id={'contact'} className={'btn'}>

Contact

</Link>

);

}

//

import './btn.scss';

const Button = (props) => {

const btnEnableDisable = !props.isDisabled ? 'btn-enable' : 'btn-disabled';

return (

<button

className={`btn btn-primary ${btnEnableDisable} ${props.className}`}

id={props.id}

type={props.type}

value={props.value}

onClick={props.onClick}

disabled={props.isDisabled}

>

{props.content}

</button>

);

};

Button.defaultProps = {

type: 'button',

className: 'btn',

disabled: false,

};

export default Button;

https://stackoverflow.com/questions/42463263/wrapping-a-react-router-link-in-an-html-button

Using the latest hooks from react-router v6, this can now be done easily with the useNavigate hook.

import { useNavigate } from 'react-router-dom'  

function MyLinkButton() {

  const navigate = useNavigate()

  return (

      <button onClick={() => navigate("/home")}>

        Go Home

      </button>

  );

}

https://codesandbox.io/s/dczs4?file=/src/Components/common/Button/style.css

https://bobbyhadz.com/blog/react-button-link

https://blog.logrocket.com/react-icons-comprehensive-tutorial-examples/

https://stackoverflow.com/questions/41080481/in-reactjs-how-to-invoke-link-click-via-button-press

https://stackoverflow.com/questions/52697730/button-with-icon-component

https://www.codegrepper.com/code-examples/javascript/how+to+add+link+to+button+in+react+js

https://chayanit-chaisri.medium.com/react-create-a-show-more-less-button-aa0e9cd0f927

https://www.pluralsight.com/guides/how-to-implement-a-read-more-link-in-react