Understanding React Props: How to Pass Data Between Components

Hello, fellow Reactêrs! Welcome to my React sphere! Are you a total newbie in React like me or do you just want to refresh your knowledge on the fundamentals of React, then this article is for you!

Introduction

If you have ever watched any video on React, I'm very sure that you would have heard of Props. Props is very important in React because it allows data to be passed from one component to another. In this article, we'll talk about React props, and how to use it.

What are React Props

React props are used to pass data to components. A prop is essentially an argument. In Javascript, functions take in arguments that can be used inside of the function code block. That is precisely the way it works in React. Components are usually functions and just like Javascript functions take in arguments, and the argument is called props. Props usually return an object.

const CardList = (props) => {
    return(
        console.log(props)
    )
}

// Returns an empty object

How props pass data between components

Since props are essentially arguments and components are functions, they can be passed into other functions (components) and accepts data. Props is usually passed to the child component when the component is being called inside of the parent component.

const CardList = () => {
    const cardText = "Hey, welcome to React props!";
    return(
        <Card props={cardText} />
    )
}

const Card = (props) => {
    return console.log(props)
}

//This returns an object with the key props and value "Hey, welcome to React props!"

How to use React props

Props make it easier for us to reuse components by passing in different data. We can have one component and render it multiple times.

const CardList = () => {
    const cardText1 = "Hey, welcome to React props1";
    const cardText2 = "Hey, welcome to React props2";
    const cardText3 = "Hey, welcome to React props3";
    const cardText4 = "Hey, welcome to React props4";
    return(
        <React.Fragment>
            <Card props={cardText1} />
            <Card props={cardText2} />
            <Card props={cardText3} />
            <Card props={cardText4} />
        </React.Fragment>   
    )
}

const Card = (props) => {
    return <p>{props.props}</p>
}

Since props is an object, there are multiple ways it can be accessed in the child component. We can access it using the dot notation which is popularly used in Javascript or we can use the destructuring method. Personally, I prefer the destructuring method because it's easier.

How to use destructuring method in props

Destructuring is a feature that was introduced in ES6 Javscript. It makes it easier for us to access objects or arrays. In React props, when data is being passed to a child component as a parameter, that data which we call props can be accessed using the destructuring method. It can either be destructured inside of the parenthesis of a component or inside the component itself.

const CardList = () => {
    const cardText1 = "My name is Loveth";
    const age = 989;
    return(
        <React.Fragment>
            <Card name={cardText1} age={age} />
        </React.Fragment>   
    )
}

const Card = ({name, age}) => {
    return (
        <div>
            <h1>{name}</h1>
            <p>{age}</p>
        </div>
    )
}

Or it can be destructured inside of the component.

const CardList = () => {
    const cardText1 = "Hey there! Thanks for reading this far";
    const cardHeight = "190cm";
    const cardHair = "Brown";
    return(
        <React.Fragment>
            <Card name={cardText1} height={cardHeight} hair={cardHair} />
        </React.Fragment>   
    )
}

const Card = (props) => {
    const {name, height, hair} = props;

    return (
        <div>
            <h1>{name}</h1>
            <p>{height}</p>
            <p>{hair}</p>
        </div>
    )
}

How to pass in props from an array of objects

If you have an array of objects and you want to pass in the objects as a prop, it can be destructed at the point where the child component is being called and the props is being passed in as a parameter.

If you're looping through an array of objects like I'm doing below, you must always pass in a key prop. A key prop can be anything, a string, number, etc that is unique to each data being passed in.

const data = [
    {
        id: 1,
        name: 'Loveth',
        age: 103,
        sex: "female"
    },
    {
        id: 2,
        name: 'Laurel',
        age: 42,
        sex: "female"
    },
    {
        id: 3,
        name: 'Festus',
        age: 8,
        sex: "Male"
    },
]

const CardList = () => {
    return(
        <React.Fragment>
            {
                data.map(person => {
                    return <Card {...person} key={person.id} />;
                })
            }
        </React.Fragment>   
    )
}

const Card = (props) => {
    const {name, age, sex} = props;

    return (
        <div>
            <h1>{name}</h1>
            <p>{age}</p>
            <p>{sex}</p>
        </div>
    )
}

If I don't pass in a key prop, I get the error below.

Conclusion

Understanding React props is an important skill when it comes to building React applications. Props are used to pass data from one component to another which allows the creation of dynamic features. By passing props down from parent components to child components, you can create reusable code that is easier to maintain. In this article, we have covered the basics of props in React and how to use them to pass data between components.

Thanks a lot for reading this far and I hope you enjoyed the article. Keep learning and building with React!