Pure functions!

PHOTO

Thu Jun 24 2021 16:18:30 GMT+0000 (UTC)

Saved by @hisam #array #destructuring #javasc #react.js

//What are pure functions?
//Pure functions take an input value (a parameter or argument) and produce an output value. //Like with hashing, the same input it will always return the same output 

const myPureFunction = number => return number * 4

//Pure functions must:
//1. Contain no side effects
//2. When given the same input, return the same output.
// A pure component avoids any use of state.
map
filter
reduce

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

@hisam

Add random element to array : React Pure functions! Fetch data Component React Filter, then map an array : React Filter an Array of Objects by Value: React Simple React Toggle Component with Styling setState Callback in Class Componenet setState Callback in a Functional Component React State with Hooks Demo Toggle State with Hooks React Context API Good REact Tutorials Changing the Background Color in React Set multiple counters : React Add props to Styled Component

#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.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}
    />
  );
}

React Color Gradients

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

#javascript #react.js

Add a new object to a list (array) in React

const [inputValue, setInputValue] = useState('');
const [list, setList]= useState([]);

handleAddIntemOnList(){
  // create a new item as object to be added to the list array
  const newItem = {
    name: inputValue,
    addedAt: new Date().toLocaleTimeString("pt-br", {
      hour: '2-digit',
      minute: '2-digit'
    })
  }
  // save into the list state
  setList(prevState => [...prevState, newItem])
}

#javascript #react.js

Keep the previous state in React useState

setState(prevState => [...prevState, newState])

#javascript #react.js

Create and format the current hour with JS

const createdAt = new Date().toLocaleTimeString("pt-br", {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
})

Данные инпутов в форме

const [inputs, setInputs] = useState({
    title: '',
    address: '',
    methodName: '',
    signatures: '',
    calldatas: ''
  }) 


const inputHandler = (event:React.ChangeEvent<HTMLInputElement>) => {
    setInputs({...inputs, [event.target.name]: event.target.value})
  };


<Input placeholder='Title' name='title' onChange={inputHandler}/>
<Input placeholder='Target contract address' name='address' onChange={inputHandler}/>
<Input placeholder='Method name' name='methodName' onChange={inputHandler}/>

#javascriptreact #react.js

Send Form Data To Email Logic

 const initialState = {
    name: "",
    email: "",
    mobile: "",
    subject: "",
    message: "",
  };
  const [formData, setFormData] = useState(initialState);

  const newsletterHandler = (e) => {
    e.preventDefault();
    console.log(formData);
    window.location.href =
      "mailto:info@gmail.com?" +
      "&body=" +
      "Name : " +
      formData.name +
      "%0D" +
      "Email : " +
      formData.email +
      "%0D" +
      "Mobile : " +
      formData.mobile +
      "%0D" +
      "Subject : " +
      formData.subject +
      "%0D" +
      "Message : " +
      formData.message;

    setTimeout(() => {
      setFormData(initialState);
    }, 3000);
  };

#javascript #array #set

Remove Array Duplicates

const removeArrDup = (arr = []) => [... new Set(arr)]

removeArrDup([1,1,2,2,2,3])
// Expect output to be  [1,2,3]

#javascript #react.js

Cleanup create-react-app

If you want to get rid of unnecessary files created by create-react-app you can:
1. Install this: npm i -g cleanup-react-app
2. Run inside your REACT project: cleanup-react-app

Two dimensional array search

haystack.indexOf(haystack.find(arr => arr.includes(search)));
<- 2

undefined

Using on Input and onBlur to set values and submit them to Redux

 <Control
type="text"
size="sm"
style={{ width: '146px' }}
placeholder="Enter new library name"
onInput={(e) => setLibraryName((e.target as HTMLInputElement).value)}
onBlur={() => dispatch(posesSlice.actions.setLibrary({ name: libraryName }))}
/>

Why can’t you call this.setState from within the render method?

this.setState automatically calls render, so it would create infinite loop.

Browse more snippets >>