map, filter, reduce, find, findindex

PHOTO

Mon Jun 19 2023 15:22:42 GMT+0000 (Coordinated Universal Time)

var numbers = [12,15,12,13,50,46,50,25,1,3,7,64,125,25]

------------------ map formula --------------------------
//Map -Create a new array by doing something with each item in an array.
// function namedouble(varibale) {
//   return varibale * 2;
// }
// const newNumbers = numbers.map(namedouble);

const newNumbers = numbers.map(function (varibale) {
  return varibale * 2;
}) // anonymus function because it does not have any name

// var newNumbers = [];
// numbers.forEach(function (varibale) {
//   newNumbers.push(varibale * 2);
// });
console.log(newNumbers);
------------------ filter formula --------------------------
/Filter - Create a new array by keeping the items that return true.

const newNumbers = numbers.filter(function(num) {
  return num < 10;
});

// var newNumbers = [];
// numbers.forEach(function(num) {
//   if (num < 10) {
//     newNumbers.push(num);
//   }
// })
console.log(newNumbers);
------------------ reduce formula --------------------------
//Reduce - Accumulate a value by doing something to each item in an array.

var newNumber = numbers.reduce(function (accumulator, currentNumber) {
  console.log("accumulator = " + accumulator);
  console.log("currentNumber = " + currentNumber);
  return accumulator + currentNumber;
 });

// var newNumber = 0;
// numbers.forEach(function (currentNumber) {
//   newNumber += currentNumber
// })
------------------ find formula --------------------------
//Find - find the first item that matches from an array.

const newNumber = numbers.find(function (num) {
  return num > 10;
 })

console.log(newNumber);
------------------ findindex formula --------------------------
//FindIndex - find the index of the first item that matches.

const newNumber = numbers.findIndex(function (num) {
  return num > 10;
 })

console.log(newNumber);

COPY

Ejemplos de las funciones más utilizadas en React que son alternativas de usar foreach. son aceptadas por la mayoria de los browser.

Save snippets that work from anywhere online with our extensions

Comments

React

@sarfraz_sheth

constat and html with JS Inlins CSS Style if condition and dynamic inline style Component Import/Export JSX ES6 props in react Devtools - insert components in components loop from list to render map, filter, reduce, find, findindex substring (cut long tex) and map to create new array arrow function Conditionaly Rendering Ternary Operator - Conditional Rendering Advance useState Hook or autoupdate elements useState auto update - Timer practice Destructuring Array Destructuring array to call a function in it as in the useState function destructuring practice - nested object item name Event handling useState over and out form button Event Input change while typing maximo uso event, components and use state complex setstate and events complex usestate - store objects to be changebales spread operator ES6 spread operator ES6 - Practice add item in array Spread operator and map - Practice Oposite of Boolean previous value - Tree concept practice fileter or delete an array list with useState add Objects in array (event useState)

#react.js #redux

Check if token expires and logout user

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

##javascript ##js #next.js #react.js

Animate header on scroll with Next.js & TailwindCSS

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

#css #react.js

React Color Gradients

https://codepen.io/marcobiedermann/pen/WNGWzYR

#react.js #javascript #checkboxtoggle

javascript - How to toggle boolean state of react component? - Stack Overflow

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

#javascript #react.js

lowercase, uppercase, remove spaces ( trim ) , capitalize first letter

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

#react.js

Open new window onclick reactJS

onClick={() => window.open(url, "_blank")}

#react.js

Определяет клик вне компонента

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

#react.js

useWorker | useWorker

https://useworker.js.org/

#react.js

React JSX Iterating a List/Array

this.state = {
	zombies:[
    {
    	name: 'Zombie'
    },{
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    }
    ]
}

render() {
	return (
    	<div>
        {
        	this.state.zombies.map(zombie => <h1>{zombie.name}</h1>)
        }
        
        </div>
    )
}

#javascript #react.js

Hooks at a Glance – React

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

function Example() {
  const [count, setCount] = useState(0);


  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

#javascript #react.js

loop in react jsx

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

////////// or:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

#react.js

Material UI style snippet

const useStyles = makeStyles((theme) => ({}));

#react.js

GRID material ui

<Grid container><Grid item></Grid></Grid>

#react.js

MATERIAL UI _ custom style

import { createMuiTheme } from '@material-ui/core/styles';

// A custom theme for this app
const theme = createMuiTheme({});

export default theme;

#react.js #setstate

A correct way to log the current state after the update would be:

this.setState({ name: 'Matt' }, () => console.log(this.state.name))

map, filter, reduce, find, findindex

Save snippets that work from anywhere online with our extensions

Comments

More like this

React

Browse more snippets >>

map, filter, reduce, find, findindex

Save snippets that work from anywhere online with our extensions

Comments

More like this

React

Browse more snippets >>

Embed code snippet