Props.md

Introduction to Props in React.

What are Props?

Properties or Props in React, you can think of them as function arguments
in JavaScript or attributes in HTML elements. They are basically inputs to a component
which inturn makes the component to behave differently according to the data get
passed in.

Example:

functional components.

function SayHello(props) {
  return (
    <div>
      { props.name }
    </div>
  )
}

Class component

import React from 'react'

class SayHello extends React.Component {
  render() {
    return (
      <div>
        {this.props.name}
      </div>
    )
  }
}

How do we pass Props to a components.

To pass Props to a component, it's basically like passing attributes to a HTML
element.

Example:

ReactDOM.render(
  <SayHello name="Charles" />,
  document.getElementById("root")
);

OR

function Greet() {
  return (
    <SayHello name="Charles" />
  )
}

Note

So here, "name" is the attribute we pass to the SayHello component as props in this
case, note that you can also pass objects, functions, arrays etc, it's not restricted to
only string or numbers.

Props are Read-Only

What does that basically mean? It mean once props are defined you can't change
them directly within the component they are passed to. in otherwords, Props are
strictly used for inputs to a component whether it's a class or functional component.
Props Cannot be changed inside of a component! We say, it's Immutable. in simple
term something that connot be change directly.

Example

function SayHello(props) {
  props.name = "Charles";
  return (
    <div>
      { props.name }
    </div>
  )
}

Typechecking With PropTypes

In development is always good to setup error checks or some sort of way to let you
known wheather you working with or passing right information to your application or
other functions that works with some information within your application while
developing or working on a project. This is where propsTypes comes in to play.
PropTypes is a typechecking library for React application which give you ability to
check wheather your passing right propTypes and props itself.

Example:

Take the SayHello function for example, the function requires a props called name but
if we forget to pass the name props to it, it's just not going to display anything but
and no error wil be displayed. But say we really need the name info but forgot to
include it. until this point we don't have away to let us known, hey you forgot to pass a
name props to the SayHello function. it will be cool if we could if it can tell us that.

Let's see how to do that.

import PropTyes from 'prop-tyes'

function SayHello(props) {
  return (
    <div>
      { props.name }
    </div>
  )
}

SayHello.propTyes = {
  name: PropTyes.string.isRequired
}

Now we mark the name properity as required and it should be a string.
So if we forget to pass the name properity or pass a wrong datatype next time we are
using this component it's gonna yell at us, either we pass a wrong type or not pass it
at all.