Components and Props in React

---

Introduction

Aha!!! Welcome friends, In the ‘Components and Props in React’ blog, We will learn to use props in Component in React as Functional and Class-based Components.

We will learn how to use the constructor. After that, we will pass props from one component to another component.

It is recommended to read the ‘Create React App in 5 minutes‘ article. Well, we are recommending to try out. It is fun to create react app in just 5 minutes. 😀 

Let’s React,

Prerequisites:

1. For Development – use as per your resource availability. 
   1. Local Installation:  (Recommended Node >= 8.10 and npm >= 5.6)
      1. Node
      2. Npm
      3. Any Text Editor(Visual Studio – recommended)
   2. Online Compiler: (For Quickstart – codepen)
2. Revise of React Concepts 
   1. React – An introduction
   2. 5 minutes Create React App Guide

Terminology

1. Component:

Components are independent and reusable bits of code. It is same as JavaScript functions, but work in isolation and, return HTML via a render() function.

2. Props: 

“Props” means properties and it is used for passing data from one component to another. Its data is considered read-only format.

3. State:

The State is called an object that contains information that may modify over the lifetime of the component.

React Components and Props

What is Component

React is known as a component-based library that divides the UI into small reusable pieces. Components communicate (send data from one to another component ) and pass data between components is by using properties (props).

What is Props

“Props” stands for properties(a special keyword). They are used for passing data from one component to another component. Data with props are passed in a unidirectional flow like one the way from parent to child.

Props data is known as read-only, Moreover, Data is coming from the parent should not be changed by any child components.

How to use Props in React Components

Props can be used to pass data from one component to another. There are below the way of using  props with React Component

Conceptually, components are like JavaScript functions. They accept only arbitrary inputs (here “props”) and return React elements defining what should appear on the screen.

1.Props in Function Component: 

a. One Version – Single value using props in Component

Props in Function Component – A function is called a valid React component which accepts a single “props” ( properties) object argument with data and returns a React element. These components are called “function components” as they are similar to JavaScript functions.

In a function component, components receive props the same as a normal function argument. A function component will accept the props object with properties you described in the component called:
Example: Below is a simple example of the Props in Function component. In the below example, the welcome is a function and we are passed ‘props’ and parameters.

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

b. Second Version –  Multiple values using props in Component

In the below example, we have used multiple react elements with different values. the welcome is a function and we are passed ‘props’ and parameters. Follow the below code for more details.

Example: 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(, document.getElementById('root'));

2. Props in the Constructor

If your component has a constructor function, it is recommended that the props should be passed to the constructor and to the React.Component via the super() method.

Example:

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}
ReactDOM.render(, document.getElementById('root'));

3. Pass Data From One Component to Another Component:

Props can be passed through many ways like string, variable, object way. We will see how we can pass props as arguments and use them in components in react.

Using String as props 

In Component, props can be passed as string format. For that, we need to define attributes with value. After passing it to the component as below.

Example:

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>;
  }
}
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</div>
);
}
}
ReactDOM.render(, document.getElementById('root'));

Using Variable as props:

In Component, props can be passed using curly braces {} and used in components. For that, we need to define variables with a value and pass the variable to the component as below.

class Car extends React.Component {
  render() {
return <h2>I am a {this.props.brand}!</h2>;  }
}
class Garage extends React.Component {
render() {
const carName="Ford";
return (
<div>
<h1>Who lives in my garage?</h1>
<Car brand="{carName}" />
</div>
);
}
}
ReactDOM.render(, document.getElementById('root'));

Example:

Using Object as props:

In Component, props can be passed as Object. We can use multiple values for different keys. We need to create objects and assign properties and values. After passing them as props to the component. Follow the below code.

Example:

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.carObject.brand}!</h2>;
  }
}
class Garage extends React.Component {
render() {
return (
const carObject = {"name","Thunderbird","model":"1955", "brand":"Ford"}'
<div>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</div>
);
}
}
ReactDOM.render(, document.getElementById('root'));

Let’s conclude the topic.

Conclusion

In this blog, we have seen how to use props using constructors, class, and Functional Components. For more React tutorials, follow our blog. Get in touch with our team today!