using_proptypes.js

import PropTypes from 'prop-types'

export default function Card({ title, mainText, color, colors, details }) {
  return (
    <div>
      <h2 style={{ color }}>{title}</h2>
      <p>{mainText}</p>
      {colors.map((colorItem) => (
        <span key={colorItem}>{colorItem}</span>
      ))}
      <br />
      {details.id}
      <br />
      <br />
    </div>
  )
}

Card.defaultProps = {
  color: '#000000',
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  color: PropTypes.string,
  mainText: PropTypes.string.isRequired,
  colors: PropTypes.arrayOf(
    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  ).isRequired,
  details: PropTypes.shape({
    id: PropTypes.number,
    width: PropTypes.string,
  }).isRequired,
}
// to dynamically use your components ==> rendering data from the server
// declaring the types for your props
// props ==> component parameters
// proptypes help define the types for your props
// (title) => string

/**
 *
 * @param {Number} x any number
 * @param {Number} y any given
 * @returns Number
 */
function sum(x, y) {
  return x + y
}
sum(2, 34)
sum(2, 6)
sum(2, 2)
sum(6, 34)

@Deewiliams documentation for proptypes can be found here https://reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper