REACT - PROPS

    // PROPS  < = PROPERTIES


    const firstBook = {
    img: "https://images-na.ssl-images-amazon.com/images/I/51VQB3uWu+L._SX258_BO1,204,203,200_.jpg",
    author: "Alice Schertle",
    title: "Little Blue Truck's Springtime",
    };

    const Book3 = (props) => {
    console.log(props);
    return (
    <article className="book">
        <img src={props.img} alt="image book" />
        <h1>{props.title}</h1>
        <h4 className="author">{props.author}📘</h4>
    </article>
    );
    };

    //Booklist
    function BooklistProps() {
    return (
    <section className="booklist">
        <Book3 img={firstBook.img} title={firstBook.title} author={firstBook.author} />
    
    </section>
    );
    }

    // PROPS  < = DIFFERENT WAYS TO PASS PROPS

    const Book3 = (props) => {
    return (
    <article className="book">
    <img src={props.img} alt="image book" />
    <h1>{props.title}</h1>
    <h4 className="author">{props.author}📘</h4>
    </article>
    );
    };

    const Book5 = (props) => {
    const {img, title, author} = props;
    return (
    <article className="book">
    <img src={img} alt="image book" />
    <h1>{title}</h1>
    <h4 className="author">{author}📘</h4>
    </article>
    );
    };


    const Book6 = ({img, title, author}) => {
    return (
    <article className="book">
    <img src={img} alt="image book" />
    <h1>{title}</h1>
    <h4 className="author">{author}📘</h4>
    </article>
    );
    };


    ////Adding a children
    const Book6 = ({ img, title, author, children }) => {
    //children
    return (
    <article className="book">
        <img src={img} alt="image book" />
        <h1>{title}</h1>
        <h4 className="author">{author}📘</h4>
        {children}
    </article>
    );
    };


    const Book6 = ({img, title, author:}) => {

    //  LIST ARRAY

const names = ["john", "peter", "susan"];
const newName = names.map((name) => {
console.log(name);
return <h1>{name}</h1>
});

function BooklistProps() {
return <section className="booklist">{newName}</section>;
}


//RETURN COMPONENT
//Booklist
function BooklistProps() {
return (
<section className="booklist">
    {books.map((book) => {
    const { img, title, author } = book;
    return <Book7 book={book}></Book7>;
    })}
    ;
</section>
);
}
//props.book
const Book7 = (props) => {
const { img, title, author } = props.book;
return (
<article className="book">
    <img src={img} alt="image book" />
    <h1>{title}</h1>
    <h4 className="author">{author}📘</h4>
</article>
);
};

   

    //  KEY PROP
    Need to pass a key or id, unique property or it will give error in the console.
    <Book7 key={book.id} book={book}></Book7>;


   

    // PROPS USING SPREAD OPERATOR   ...
    // return <Book7 key={book.id} {...book}></Book7>;

   

    // PROPS  < = PROPERTIES
    //Concept: Object that has propierties of the object. Like params but you don't need to specify them all
    
    app.js
    import React from 'react';
    import ContactCard from './components/ContactCard';


    function App() {
    return (
        <div className="contacts">
        <ContactCard 
        contact={{name:"Mr Whiskerson1",imgUrl:"https://baconmockup.com/640/360",phone:"+345555888",email:"whiska@gmail.co"}} />
        <ContactCard 
        contact={{name:"Mr Whiskerson2",imgUrl:"https://baconmockup.com/640/360",phone:"+345555888",email:"whiska@gmail.co"}} />
        <ContactCard 
        contact={{name:"Mr Whiskerson3",imgUrl:"https://baconmockup.com/640/360",phone:"+345555888",email:"whiska@gmail.co"}} />
        <ContactCard 
        contact={{name:"Mr Whiskerson4",imgUrl:"https://baconmockup.com/640/360",phone:"+345555888",email:"whiska@gmail.co"}} />
        
        {/* <ContactCard name="Mr Whiskerson4"
                    imgUrl="https://baconmockup.com/640/360" 
                    phone="+345555888"
                    email="whiska@gmail.co"
                    /> */}
        </div>
    );
    }

    export default App;


    contactCard.js
    //EVERY COMPONENT NEEDS TO IMPORT REACT
    import React from 'react'

    function ContactCard(props){
        return (
            <div className="contact-card">
                <img src={props.contact.imgUrl} alt="img"/>
                <h3>Name: {props.contact.name}</h3>
                <p>Phone: {props.contact.phone}</p>
                <p>Email: {props.contact.email}</p>
            </div>
        )
    }

    export default ContactCard

    OR

    import React from 'react';
import ContactCard from './components/ContactCard';


function App() {
  return (
    <div className="contacts">
    <ContactCard 
    contact={{name:"Mr Whiskerson1",imgUrl:"https://baconmockup.com/200/100",
    question:"What's the best thing about Switzerland? ",
    punchLine:"I don't kwnow but the flag is a big plus"}} />
    <ContactCard 
    contact={{name:"Mr Whiskerson2",imgUrl:"https://baconmockup.com/200/100",
    question:"",
    punchLine:"He'll stop at nothing to avoid them!"}} />
    <ContactCard 
    contact={{name:"Mr Whiskerson3",imgUrl:"https://baconmockup.com/200/100",
    question:"Hear bout the new restaurant called Karma?",
    punchLine:"There's no menu: You get what you deserve"}} />
    <ContactCard 
    contact={{name:"Mr Whiskerson4",imgUrl:"https://baconmockup.com/200/100",
    question:"Did you hear about the claustrophobic astronaut?",
    punchLine:"He just needed a little space"}} />
    
    {/* <ContactCard name="Mr Whiskerson4"
                 imgUrl="https://baconmockup.com/200/100" 
                 question="Hey"
                 punchLine="You"
                 /> */}
    </div>
  );
}

export default App;



//EVERY COMPONENT NEEDS TO IMPORT REACT
import React from 'react'

function ContactCard(props){
    return (
        <div className="contact-card">
            <img src={props.contact.imgUrl} alt="img"/>
            <h3 style={{display: props.contact.question ? "block" : "none"}}>Question: {props.contact.question}</h3>
            <h3 color={{color: props.contact.question ? "#888888" : "#2FAjN2"}}>PunchLine: {props.contact.punchLine}</h3>
        </div>
    )
}

export default ContactCard