-
Image from API unable to load on react
https://stackoverflow.com/questions/60622180/display-image-from-api-in-react
-
Fetch api react hooks
https://medium.com/thecodefountain/fetch-api-data-using-useeffect-react-hook-465809ca12c6
-
Runtime Generator
add babel plugin transform runtime
-
Props in link react router
https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router
-
Error handling in react hooks
https://medium.com/technofunnel/error-handling-in-react-hooks-e42ab91c48f4
-
Pass variable parameter api url
-
Reload page when clicking on react link
-
Favicon not displayed
https://stackoverflow.com/questions/37298215/add-favicon-with-react-and-webpack
-
PWA manifest (if manualy not working or error)
-
Router page not found on netlify (and reload not found)
https://community.netlify.com/t/netlify-page-not-found-when-sharing-react-router-dom-based-links/11744/5 looks jaylowe1's answer on Apr 20,
"build": "webpack --mode=production && echo '/* /index.html 200' | cat >dist/_redirects",
-
Cannot read property 'map' of undefined with react hooks
https://stackoverflow.com/a/55667055/11358449 > https://www.debuggr.io/react-map-of-undefined/
Add inline If with Logical && Operator (https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator)
{items && items.map(item => { return <div key={item.id}>{item.title}</div>; })}
-
Put two state on event/function/attribute
https://stackoverflow.com/questions/68380457/setting-two-state-variable-onclick-in-react
onClick={() => { setState1(true); setState2(false) } }
-
Get unique value
[...new Set(a)]
const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5] console.log([...new Set(numbers)]) // [2, 3, 4, 5, 6, 7, 32]
-
Scroll to top Use built in javascript function scrollTo()
-
Prevent page margin expand
overflow: hidden (on containter)
-
Custom media queries on css framework
https://stackoverflow.com/questions/45847090/media-queries-in-material-ui-components
-
Vertical Center
top: 50%; transform: translateY(-50%); position: relative; overflow: hidden;
ANOTHER METHOD
margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; //optional, if the content and image position are broken
-
Overflow hidden on position:absolute
put overflow: hidden on the content that contain position:absoulute, or on it's container https://stackoverflow.com/questions/5513382/absolute-position-and-overflowhidden
-
CSS Ternary Operator
-
Image Resize & Keep Aspect ratio
object-fit: cover; width: 100%; height: 250px;
-
Intellisense
if not working try to disable, reload, then enable, reload ctrl + space to view
-
Tailwind not working
check tailwind.config, on purge, usually missing path (src), try this: purge: ['./pages//*.{js,ts,jsx,tsx}','./src/components//*.{js,ts,jsx,tsx}'],
-
Import font (custom font)
customFont={ <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" /> }
Put inside of , then use it {fontFamily: 'font_name'}
-
id="__next" styling
<Root theme={theme} scheme={scheme} className="overflow"> <style> {` #__next { overflow: hidden } `} </style> .... </Root>
-
NODE_ENV is not recognized as an internal or external command, operable program or batch file.
npm install -g win-node-env
-
if there is error on console.log [forwardRef (container)]
its means that there is an empty active container, disable the whole container or fill it with something
-
next/image Unconfigured Host
https://nextjs.org/docs/messages/next-image-unconfigured-host
Add the hostname of your URL to the images.domains config in next.config.js
module.exports = { images: { domains: ['assets.example.com'], }, }
-
Dynamic Routing getServerSideProps
vercel/next.js#13309 > https://stackoverflow.com/questions/61222726/dynamic-routing-with-getserversideprops-in-nextjs/61240697#61240697
export async function getServerSideProps(context) { const { id } = context.query; const res = await fetch(`https://restcountries.eu/rest/v2/name/${id}`); const country = await res.json(); console.log(`Fetched place: ${country.name}`); return { props: { country } };
-
Data Fetching
You can only use getInitialProps, getServerSideProps, getStaticProps in Next.js PAGES folder, these methods will not work outside pages folder
-
Get query string params from URL
https://stackoverflow.com/a/61969441/11358449
Use getInitialProps methods,
const Index = ({id}) => { return(<div>{id}</div>) } Index.getInitialProps = async ({ query }) => { const {id} = query return {id} }