shows VM214 react_devtools_backend.js:4082

console.log() shows VM214 react_devtools_backend.js:4082 in Chrome.

Console => Gear icon => Settings => Framework Ignone List // not best option

console.info(data) instead console.log(data) // not best option

Leave as it is...

Scroll methods and hooks in React

import React, { useRef, useEffect } from 'react';

const bottomRef = useRef(); // create Ref

useEffect(() => {    bottomRef.current.scrollIntoView({ behavior: 'smooth' });  }); // scroll bottom

https://stackoverflow.com/questions/37620694/how-to-scroll-to-bottom-in-react

window.scrollTo(0, document.body.scrollTop);

window.scrollTo(0, document.body.scrollHeight); // scroll to bottom

window.scrollTo({        top: 0,        behavior: 'smooth',      });

window.scrollTo(0, 0); // scroll to the top of the webpage

window.scrollTo(0, 780); // (x - horizontally, y - vertically)

el.scrollIntoView({ behavior: 'smooth' }

https://medium.com/@remoteupskill/different-ways-of-scrolling-to-a-dom-element-in-react-using-reacts-useref-hook-ec1afff82c43

https://bobbyhadz.com/blog/react-scroll-to-element-on-click

React.useEffect(() => {

window.scrollTo(0, 0);

}, []);

import { useEffect } from 'react'; // import to component

  useEffect(() => {    window.scrollTo(0, 0);  }, []); // inside component function before return

https://stackoverflow.com/questions/33188994/scroll-to-the-top-of-the-page-after-render-in-react-js

    document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });

    const scrollDiv = document.getElementById('contact').offsetTop;

    window.scrollTo({ top: scrollDiv, behavior: 'smooth' });

https://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript

document.getElementById("link3").tabIndex = -1;

node.setAttribute('tabindex', '-1')

node.focus()

node.removeAttribute('tabindex')

Getting, using, passing keys in React

If element is unchangable, use hard-coded key => <div key='custom_key'></div>

<div key={`${Object.keys(arr)}`}></div>

<div key={`item-${index}`}></div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys

State in React functional components

import { useState } from 'react'; // importing hook useState

function item() { 

const [showMore, setShowMore] = useState(false); // destructuring array from return of useState function => getting/creatin showMore name of piece of state and setShowMore function to update piece of state

// false => default piece of state in function useState(arg)

const handleClick = () => { setShowMore(true) }

const handleClick = () => { setShowMore((prev) => { return prev + 1 }) }

return ()

}

JavaScript Array map() method do not work

import data from './data.json';

const URL = `${data.resources.map((el, index) => el.url)}`;

// data +  "resources" + map(el, index) => element + "url"

data.json

{  "resources": [ {      "title": "",      "link": "",      "url": "https://site.com/folder"     } ] }

// add / at the end => /folder/ ===OR=== remove / from the end => /folder

{[...Array(n)].map((el, index) => (

<div key={index} className=''>{el}</div>

))}

// ...Array above can be used to repeat [0] element n times

// remove duplicates within a map function =>

<div class="tags">
  {posts.map(post =>
    [...new Set(post.frontmatter.tags)].map(tag => (
      <Link
        key={tag + `tag`}
        to={`/tags/${kebabCase(tag)}/`}
        className="tag is light"
      >
        {tag}
      </Link>
    ))
  )}
</div>

https://stackoverflow.com/questions/65512907/remove-duplicates-within-a-map-function

Contact form errors and solutions in React

for => htmlFor

Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.

Solution: In contact-from.jsx change checked to defaultChecked.

Working with images in React

Depending on API => add / at the end => /folder/ OR remove / from the end => /folder in URL.

import Yourimage from '../images/background_image.png';

let imgStyle= {  backgroundImage: `url(${Yourimage})`};

class ImgComponent extends Component {

render() {    return (      <div style={imgStyle}> </div>    );  }

}

https://medium.com/react-courses/5-top-methods-to-import-and-load-images-dynamically-on-cra-react-local-production-build-855d3ba3e704

https://thewebdev.info/2021/11/14/how-to-fetch-image-from-api-with-react/

https://frontend-digest.com/progressively-loading-images-in-react-107cb075417a