complex usestate - store objects to be changebales

PHOTO

Tue Jun 27 2023 22:11:54 GMT+0000 (Coordinated Universal Time)

Saved by @sarfraz_sheth #react.js

---------------------  App Page --------------------
import React, { useState } from "react";
import Form from "./Form";

function App() {
  const [fullName, setFullName] = useState({
    fname: "f",
    lname: "n"
  });

  return (
    <div className="container">
        <div>
          <h1>Hola {fullName.fname + " " + fullName.lname}</h1>
          <Form setFullName={setFullName} />
        </div>
    </div>
  );
}

export default App;


---------------------  Form Page --------------------

import React, { useState } from "react";
import FormInput from "./FormInputs";

function Form(params) {
  
  function getfullname(event) {
    const newValue = event.target.value;
    const inputName = event.target.name;


    params.setFullName((prevName) => {
      if (inputName === "fname") {
        return { fname: newValue, lname: prevName.fname };
      } else if (inputName === "lname") {
        return { fname: prevName.lname, lname: newValue };
      }
    });
    // --------- laternative by using desturcturing code
      function getfullname(event) {
    	const { name, value } = event.target;
    	params.setFullName((prevName) => {
      	if (name === "fname") {
        	return { fname: value, lname: prevName.fname };
      	} else if (name === "lname") {
        	return { fname: prevName.lname, lname: value };
     	 }
    	});

    //params.setFullname(event.target.value);
  }
    
    
    //-------------- final of destructuring code

    //params.setFullname(event.target.value);
  }

  return (
    <form className="form">
      <FormInput
        type="text"
        name="fname"
        placeholder="Username"
        onchange={getfullname}
      />
      <FormInput
        type="text"
        name="lname"
        placeholder="Lastname"
        onchange={getfullname}
      />
      <FormInput type="password" placeholder="Password" />
    </form>
  );
}

export default Form;

objeect stored in setstate function and if condition set to set an event. to trigger.

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

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

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