Handle multiple states and objects at once, especially when you have a set of related input fields that need to be updated

PHOTO

Wed Sep 06 2023 03:01:26 GMT+0000 (Coordinated Universal Time)

Saved by @kebin20 #react.js

//THIS IS FASTER

const initialUserInput = {
  "current-savings": 10000,
  "yearly-contribution": 1200,
  "expected-return": 7,
  duration: 10
};
 

function inputChangeHandler(input, value) {
    setUserInput((prevInput) => {
      return {
        ...prevInput,
        [input]: +value
      };
    });
  }

//**NOTE: The +value expression is used to convert the value to a number (i.e., a numeric data type). The unary + operator in JavaScript is used for type conversion, and when applied to a non-number value, it attempts to convert it to a numeric value.

//The +value expression is used to ensure that the value stored in the state object (prevInput) is of numeric data type, regardless of the data type of the value being passed into the inputChangeHandler function.




//THIS IS SLOWER

  // const [enteredCurrentSavings, setEnteredCurrentSavings] = useState(0);
  // const [enteredYearlyContributions, setEnteredYearlyContributions] = useState(
  //   0
  // );
  // const [enteredExpectedReturn, setEnteredExpectedReturn] = useState(0);
  // const [enteredDuration, setEnteredDuration] = useState(0);
  // const [userInput, setUserInput] = useState({
  //   "current-savings": "",
  //   "yearly-contribution": "",
  //   "expected-return": "",
  //   duration: ""
  // });

  // function currentSavingsChangeHandler(e) {
  //   setEnteredCurrentSavings(e.target.value);
  // }

  // function yearlyContributionsChangeHandler(e) {
  //   setEnteredYearlyContributions(e.target.value);
  // }
  // function expectedReturnChangeHandler(e) {
  //   setEnteredExpectedReturn(e.target.value);
  // }
  // function enteredDurationChangeHandler(e) {
  //   setEnteredDuration(e.target.value);
  // }

  // function submitHandler(e) {
  //   e.preventDefault();

  //   setUserInput({
  //     "current-savings": enteredCurrentSavings,
  //     "yearly-contribution": enteredYearlyContributions,
  //     "expected-return": enteredExpectedReturn,
  //     duration: enteredDuration
  //   });

  //   calculateHandler(userInput);
  // }

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#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>

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);

Open new window onclick reactJS

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

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

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]);
};

useWorker | useWorker

https://useworker.js.org/

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>
  )
}

Material UI style snippet

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

GRID material ui

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

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))

Browse more snippets >>