Pass multiple parameters to onClick function

Function parameters are the names listed in the function's definition. Function arguments are the real values passed to the function. Parameters are initialized to the values of the arguments supplied.

If parameter is function (clickHandler in this case), pass argument as function => clickHandler();

import Button from './btn';

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

export default function BtnNav(footer, btnText, btnLink, clickHandler) {

const navigate = useNavigate();

return (

<ul className={`${footer}__nav`}>

{btnText.map((el, index) => (

<li key={`${footer}-k-${index}`}>

<Button

id={`${footer}-btn-${index}`}

className={`${footer}-btn-${index}`}

onClick={() => {

navigate(btnLink[index]);

clickHandler();

}}

content={el}

/>

</li>

))}

</ul>

);

}

// to avoid message error clickHandler, pass empty function as onClick in necessary components

const falseClick = () => {};

https://blog.openreplay.com/3-ways-of-passing-multiple-parameters-to-the-onclick-handler-in-react

https://stackoverflow.com/questions/26069238/call-multiple-functions-onclick-reactjs

Make footer stick bottom with flex

index.html

<div class="wrapper" id="root"></div>

<div class="wrapper"> // content container

  <header></header>

  <main></main>

  <footer></footer>

</div>

main {

flex: 1;

}

.wrapper {

display: flex;

flex-direction: column;

justify-content: space-between;

height: 100vh;

}

https://stackoverflow.com/questions/40515142/how-to-make-a-sticky-footer-in-react

https://stackoverflow.com/questions/71478639/footer-not-sticking-to-the-bottom-of-the-page-in-react

https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap

https://stackoverflow.com/questions/55541850/how-to-make-footer-stay-at-bottom-of-the-page-with-flex-box

tailwindcss and daysiui in React

https://tailwindcss.com/docs/guides/create-react-app

https://daisyui.com/docs/use/

index.css // add these lines

@tailwind base;

@tailwind components;

@tailwind utilities;

tailwind.config.js // paste into

/** @type {import('tailwindcss').Config} */

module.exports = {

content: ['./src/**/*.{html,js,jsx}'],

theme: {

extend: {},

},

plugins: [require('daisyui')],

};

package.json // consider to install

"devDependencies": {

"autoprefixer": "^10.4.8",

"node-sass": "^7.0.1",

"postcss": "^8.4.16",

"react-icons": "^4.4.0"

}

postcss.config.js

module.exports = {

plugins: {

tailwindcss: {},

autoprefixer: {},

},

}

//

Show changes in specific file using git

git show filename // will show the log message and textual diff

git status -s // list modified files

git diff filename

git log --follow filename // list commits only

git log --follow -p -- filename // entire history of file modifications

git blame <filename> // show who changed file

Links, routes, page navigation in React

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

https://www.loginradius.com/blog/engineering/react-router-basics/

App.js // do not toutch index.js

https://stackoverflow.com/questions/69832748/error-error-a-route-is-only-ever-to-be-used-as-the-child-of-routes-element

CSS buttons styles templates

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate2

https://freefrontend.com/css-button-click-effects/

Import JavaScript script into React

/hooks/useScript.js

import { useEffect } from 'react';

const useScript = (url) => {

useEffect(() => {

const script = document.createElement('script');

script.src = url;

script.async = true;

document.body.appendChild(script);

return () => {

document.body.removeChild(script);

};

}, [url]);

};

export default useScript;

then

import useScript from '../hooks/useScript';

and call

useScript('/path/to/script.js');

https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx

https://stackoverflow.com/questions/38467574/import-javascript-file-and-call-functions-using-webpack-es6-reactjs

npm i react-helmet --save-dev

<Helmet>

<script src="/path/to/resource.js" type="text/javascript" />

<script>try{Typekit.load({ async: true });}catch(e){}</script>

</Helmet>

https://www.npmjs.com/package/react-helmet

https://www.geeksforgeeks.org/how-to-include-an-external-javascript-library-to-reactjs/