REACT - EVENTS

    // <
    onst Book7 = (props) => {
    //attribute, eventHandler
    //onClick, onMouseOver
    const { img, title, author } = props.book;
    const clickHandler = () => {
    alert("hello world");
    };
    return (
    <article className="book">
        <img src={img} alt="image book" />
        <h1 onClick={()=> console.log(title)}>{title}</h1>
        <h4 className="author">{author}📘</h4>
        <button type="button" onClick={clickHandler}>
            Button
        </button>
    </article>
    );
    };

    //EASY

    onClick={clickHandler}
        const clickHandler = () => {
        alert("hello world");
        };

    // event target
    const clickHandler2 = (e) => {
    console.log(e.target);
    }

    //COMPLEX
    onClick={()=> handlerComplex(author)}>   //if not called in a function it will call it when rendering automatically
        const handlerComplex = (author) => {
        console.log(author);
        };


    

    // <
    

    // <
    

    // <