Props for Reusable Components

Using Props to Make Reusable Components

Props is a way to pass data from a parent component down to a child component, and in the process allows us to create components that are more and more reusable.

We can pass properties & values (as arguments) to props parameter of a functional component.

ContactCard.js

import React from "react"

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

export default ContactCard

App.js

index.js

index.html

We can also pass JS objects (as arguments) to props parameter of a functional component.

ContactCard.js

import React from "react"

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

export default ContactCard

App.js

index.js

index.html

Parent Component can only pass props & child component can only receive props.

Props & Inline Styling

We can use ternary operator or short circuit operator to style components inline.

JokeItem.js

import React from "react"

function JokeItem(props){
    return(
        <div>
            // Styling with Ternary Operator 
            <h3 style={{display:props.question ? "block" : "none"}}>Joke Ques : {props.question}</h3>
            
            // Styling with Short Circuit Evaluation
            <p style={{color:!props.question && "#ccc"}}>Joke punchline: {props.punchLine}</p>
        </div>
    )
}

export default JokeItem

App.js

index.js

index.html

Short circuit operatorevaluation -if this part is true) && (this part will execute)

Default Props

While most React components receive their props from a parent component, it's also possible to specify default props. defaultProps allows us to set default, or fallback values for our component props .

Card.js

import React from "react"

// Card component
function Card(props){
    const styles = {
        backgroundColor: props.cardColor,
        height: props.height,
        width: props.width
    }
    
    return(
        <div style={styles}></div>
    )
}

// Set default props
Card.defaultProps = {
    cardColor: "red",
    height: 150,
    width: 150
}

export default Card

App.js

index.js

index.html

Prop Types

To run type-checking on the props for a component, we can assign the special propTypes property.

Card.js

import React from "react"
import PropTypes from "prop-types"

// Card component
function Card(props) {
    const styles = {
        backgroundColor: props.cardColor,
        height: props.height,
        width: props.width
    }
    
    return (
        <div style={styles}></div>
    )
}

// Define prop types
Card.propTypes = {
    // Ensuring prop is limited to specific values by treating it as an enum.
    cardColor: PropTypes.oneOf(["red", "blue"]).isRequired,
    
    // Declaring a prop as a specific JS type
    height: PropTypes.number,
    
    // Chaining with isRequired to make sure a warning is shown if the prop isn't provided
    width: PropTypes.number.isRequired
}

// Set default props
Card.defaultProps = {
    height: 150,
    width: 150
}

export default Card

App.js

index.js

index.html