REACT - Use State

    // 1 ERROR EXAMPLE
    import React from "react";
    
    const ErrorExample = () => {
    let title = "random title";
    const handleClick = () => {
    title = "hello people";
    console.log(title);
    };
    return (
    <React.Fragment>
        <h2>{title}</h2>
        <button type="button" className="btn" onClick={handleClick}>
            Change title
        </button>
    </React.Fragment>
    );
    };
    
    export default ErrorExample;
    

    // 2 - USE STATE - BASICS
    import React, { useState } from "react";
    
    const UseStateBasics = () => {
    // console.log(useState("Hello world"));
    // const value = useState(1)[0];
    // const handler = useState(1)[1];
    // console.log(value, handler);
    
    const [text, setText] = useState("random title");
    const handleClick = () => {
    if (text === "random title") {
    setText("hello world");
    } else {
    setText("random title");
    }
    };
    return (
    <React.Fragment>
        <h1>{text}</h1>
        <button type="button" className="btn" onClick={handleClick}>
            Change title
        </button>
    </React.Fragment>
    );
    };
    
    export default UseStateBasics;
    

    // 3- USESTATE - ARRAY
    import React from "react";
    import { data } from "../../../data";
    
    const UseStateArray = () => {
    const [people, setPeople] = React.useState(data);
    
    const removeItem = (id) => {
    let newPeople = people.filter((person) => person.id !== id); //all the items with different ID are added to the array
    (eliminates the one we want to eliminate)
    setPeople(newPeople);
    };
    
    return (
    <>
        {people.map((person) => {
        const { id, name } = person;
        return (
        <div key={id} className="item">
            <h4>{name}</h4>
            <button onClick={()=> removeItem(id)}>remove</button>
        </div>
        );
        console.log(person);
        return "hello";
        })}
        <button className="btn" onClick={()=> setPeople([])}>
            clear items
        </button>
    </>
    );
    };
    
    export default UseStateArray;


    

    // 4 - USESTATE - OBJECT

    import React, { useState } from "react";
    
    const UseStateObject = () => {
    const [person, setPerson] = useState({
    name: "peter",
    age: 24,
    message: "random message",
    });
    
    console.log(person);
    // const [name,setName] = useState('peter')
    // const [age,setAge] = useState(24)
    // const [message,setMessage] = useState('random message')
    
    const changeMessage = () => {
    setPerson({ ...person, message: "hello world" });
    // setMessage('hello world')
    };
    return (
    <>
        <h3>{person.name}</h3>
        <h3>{person.age}</h3>
        <h4>{person.message}</h4>
        <button className="btn" onClick={changeMessage}>
            change message
        </button>
    </>
    );
    };
    
    export default UseStateObject;


    

    // 5 - USESTATE - COUNTER
    import React, { useState } from "react";
    
    const UseStateCounter = () => {
    const [value, setValue] = useState(0);
    
    const reset = () => {
    setValue(0);
    };
    
    const complexIncrease = () => {
    setTimeout(() => {
    // setValue(value + 1);
    setValue((prevState) => {
    return prevState + 1;
    });
    }, 2000);
    };
    
    return (
    <>
        <section style={{ margin: "4rem 0" }}>
            <h2>regular counter</h2>
            <h1>{value}</h1>
            <button className="btn" onClick={()=> setValue(value - 1)}>
                decrease
            </button>
            <button className="btn" onClick={reset}>
                reset
            </button>
            <button className="btn" onClick={()=> setValue(value + 1)}>
                increase
            </button>
        </section>
        <section style={{ margin: "4rem 0" }}>
            <h2>more complex counter</h2>
            <h1>{value}</h1>
            <button className="btn" onClick={complexIncrease}>
                increase later
            </button>
        </section>
    </>
    );
    };
    
    export default UseStateCounter;


    

    // <

    

    // <

    

    // <

    

    // <

    

    // <