Hello React 👋

React is component based JavaScript library used for building user interfaces and dividing the UI into reusable pieces. Components used in react interact with each other and this is vital to the structure of react apps especially in larger apps.

One way of passing data between components is with the use of props, which is short for properties. Props are parameters passed in a child component, similar to passing arguments in functions. They stores the value of attributes of a tag and work similar to the HTML attributes. When passing data with props, it is important to note that it has a Uni-directional flow ( from parent to child component ).

Requirement - Basic understanding of react components.

Passing data with props

Let us have use props in a simple function component. Function components receive props like arguments.

function App() {
  return (
    <div>
        <Greeting name="Mark" age={18} />
    </div>
  );
}

function Greeting(props) {
  return (
    <div>
         Hello, i'm {props.name} and {props.age}
    </div
  );
}

We pass multiple props at once, and can also pass any data type available in JavaScript numbers Boolean even objects. The number data type can be seen in the age used in curly braces and not passed as a string.

In the Greeting component, props is passed as a parameter, which is essential in the child component, to be able to access data from the parent component, similar to accessing properties in an object.

Using props in react allow us to avoid repitition. So in that case, we can use the greeting component for different people.

function App() {
  return (
    <div>
        <Greeting name="Mark" age={18} />
        <Greeting name="Sam" age={22} />
    </div>
  );
}

function Greeting(props) {
  return (
    <div>
         Hello, i'm {props.name} and {props.age}
    </div
  );
}

An important thing to note is, props are immutable and must not be changed manually. Using props does not make it a dynamic app that can respond to user interactions. To do that, we use state.

Working with iterations

Sometimes we may have a piece of data and we need to display all. To avoid repitition, we use the JavaScript map method. So instead of having writing your code like this to display multiple users,

function App() {
      return (
         <div>
              <Greeting name="Sam" />
              <Greeting name="Mark" />
              <Greeting name="Grace" />
         </div>
      );
}

function Greeting(props) {
  return (
    <div>
         Hello {props.name}
    </div
  );
}

we create an array of users and map through it.

function App(){
    const users = ["Mark", "Sam", "Grace"]
    const allUsers = users.map((user, id) => <Greeting key={id} user={user} />);

    return (
        <div>
         {allUsers}
        </div>
    )

}


function Greeting(props) {
    return(
        <h1>{props.user}</h1>
    )
}

In the code above, we start by creating an array of users and then iterate over it using the map method. The iterated value and key is then passed into the Greeting component as a prop. Keys are unique react identifiers and helps react track which item have been changed, added, removed or even re-ordered.

Default props

Most react components receive props from their parent component, however, it is possible to define a default props in the child component which will be used, unless props from the parent component overrides it.

Let us describe a user, but set default props for the user incase no props is passed from the parent component.

function User(props) {
       return (
      <div>
        <p> Name: {props.name} </p>
        <p>Height: {props.height}</p>
        <p>Age : {props.age} </p>
      </div>
    )
}

User.defaultProps = {
  name: "Mark",
  height: "5'",
  age: "20"
}

We use the defaultProps method to set a default props for the child component when no props data is passed or missing from the parent component. The defaultProps is an inbuilt react method which is immutable.

In this article, we have seen one way which react components communicate, however there are more advanced way for component communication using Redux which uses a single source of truth which means all data is stored in a single state and then dispatched to any component when needed.