Passing multiple props

Understanding the prop system in React is crucial. Passing multiple props from a parent component down to a child component follows the same logic as passing a single prop.

import React from 'react';
import UserProfile from './UserProfile';

const App = () => {
    return (
        <div className="profiles">
            <UserProfile 
                name="Tina" 
                location="Tampa, FL" 
                photo={someImage.png} 
            />
            <UserProfile 
                name="John" 
                location="San Diego, CA" 
                photo={someImage.png} 
            />
            <UserProfile 
                author="Andy" 
                location="Seattle, WA" 
                photo={someImage.png} 
            />
        </div>
    );
};

For every prop passed down, the props object in the child component will contain a key value pair. In this case the keys will be photo, name and location. They can be referenced using props.photo, props.name and props.location.

import React from 'react';

const UserProfile = (props) => {
    console.log("props", props)
    return (
        <div className="profile">
                <img src={props.photo} className="photo" alt="profile photo" />
            <div className="info">
                <div className="name">
                    {props.name}
                </div>
                <div className="location">{props.location}</div>
            </div>
        </div>
    )
}

export default UserProfile;