Working With Props In React JS

React JS is a popular JavaScript library for building user interfaces. One of the key concepts in React is the use of props, short for “properties”, which are a way to pass data from one component to another. In this blog post, we’ll explore how to work with props in React JS.

What are Props in React JS?

Props are a way to pass data from a parent component to a child component in React. They are a fundamental concept in React and are used to customize the behavior and appearance of a component. Props are passed down as attributes, similar to HTML attributes.

In React, components can receive props as parameters to their constructor or as properties on their instance. A parent component can pass props down to its child components, which can then use them to render their own output.

How to Work with Props in React JS?

Working with props in React is straightforward. Let’s take a look at an example of how to use props to pass data from a parent component to a child component.

Parent Component:

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent name="John" age="30" />
      </div>
    );
  }
}

In the above code, we have a parent component that renders a child component called ChildComponent. The ChildComponent has two props – name and age.

Child Component:

import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

In the above code, we have a child component that receives two props – name and age. The component then renders those props using curly braces {}.

As you can see, working with props is very simple in React. You just need to pass them down from the parent component to the child component and then use them in the child component as needed.

Passing Functions as Props

Props can also be used to pass functions down from a parent component to a child component. This allows child components to interact with their parent components and modify their state.

Here’s an example of how to pass a function as a prop:

Parent Component:

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello from Parent Component!',
    };
  }

  changeMessage = () => {
    this.setState({
      message: 'Hello from Child Component!',
    });
  };

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent message={this.state.message} changeMessage={this.changeMessage} />
      </div>
    );
  }
}

In the above code, we have a parent component that passes a message and a function called changeMessage down to the child component ChildComponent.

Child Component:

import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>Message: {this.props.message}</p>
        <button onClick={this.props.changeMessage}>Change Message</button>
      </div>
    );
  }
}

In the above code, we have a child component that receives a message and a function as props. The component then renders the message using curly braces {} and a button that triggers the changeMessage function when clicked.

As you can see, passing functions as props allows for communication between parent and child components in React.

Default Props

Sometimes, you may want to provide default values for props in case they are not passed down from a parent component. React provides a way to define default props using the defaultProps property.

Here’s an example of how to define default props:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

MyComponent.defaultProps = {
  title: 'Default Title',
  content: 'Default Content',
};

In the above code, we have a component called MyComponent that defines default values for title and content using the defaultProps property.

If a parent component does not pass down a value for title or content, the default values will be used instead.