React Props

Passing and using props in components

Passing Props

<Welcome name="John" age={30} /> # pass props
<Welcome {...user} /> # spread props

Receiving Props

function Welcome(props) { # props object
    return <h1>{props.name}</h1>;
}

Destructuring Props

function Welcome({ name, age }) { # destructure props
    return <h1>{name}</h1>;
}

Default Props

function Welcome({ name = "Guest" }) { # default value
    return <h1>{name}</h1>;
}

Children Prop

function Card({ children }) { # children prop
    return <div className="card">{children}</div>;
}
<Card>Content</Card> # pass children

PropTypes

import PropTypes from 'prop-types';
Welcome.propTypes = {
    name: PropTypes.string.isRequired, # type checking
    age: PropTypes.number
};