Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// npm install prop-types
import PropTypes from 'prop-types';

function UserProfile({ name, age, email, role, address }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
      <p>Role: {role}</p>
      {address && <p>City: {address.city}, {address.country}</p>}
    </div>
  );
}

// Attach propTypes AFTER the component definition
UserProfile.propTypes = {
  name:    PropTypes.string.isRequired,       // required string
  age:     PropTypes.number.isRequired,       // required number
  email:   PropTypes.string.isRequired,
  role:    PropTypes.oneOf(['admin', 'editor', 'viewer']), // enum
  address: PropTypes.shape({                  // optional nested object
    city:    PropTypes.string,
    country: PropTypes.string,
  }),
};

// Default props for optional fields
UserProfile.defaultProps = {
  role: 'viewer',
  address: null,
};

// Missing required prop → console warning in dev:
// Warning: Failed prop type: The prop `email` is marked as required
// in `UserProfile`, but its value is `undefined`.

export default UserProfile;