Understanding React Props and State

The data management of React components depends on these two concepts. In this lesson, we will learn how to handle data related to a certain component using `state` and how to move data between components using `props`.

What are Props?

`props`, short for properties, is a technique for moving data from a parent component to a child component. They act as a conduit for information exchange between parts.

Passing Props

1. Parent Component

In the parent component, you define the data you want to pass as a prop.

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

const ParentComponent = () => {
  const dataToPass = "Hello from parent!";

  return (
    <ChildComponent propData={dataToPass} />
  );
}

export default ParentComponent;

2. Child Component

In the child component, you receive and use the props.

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

const ChildComponent = (props) => {
  return (
    <div>
      {props.propData}
    </div>
  );
}

export default ChildComponent;

Dynamic Props

Props can be dynamic and passed based on the state or any other logic. This allows for flexible and reusable components.

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [dynamicData, setDynamicData] = useState("Dynamic Data");

  return (
    <ChildComponent propData={dynamicData} />
  );
}

State: Managing Component Data

What is State?

In React, a component’s state is how its internal data is managed. It shows the component’s current state and is modifiable by the component itself. Components may be responsive to user interactions and dynamic thanks to state.

Setting State

1. Class Components

In class components, you set the initial state within the constructor.

// MyClassComponent.js
import React, { Component } from 'react';

class MyClassComponent extends Component {
  constructor() {
    super();
    this.state = {
      myData: "Initial Data"
    };
  }

  render() {
    return (
      <div>
        {this.state.myData}
      </div>
    );
  }
}

export default MyClassComponent;

2. Functional Components with Hooks

Functional components use the `useState` hook to manage state.

// MyFunctionalComponent.js
import React, { useState } from 'react';

const MyFunctionalComponent = () => {
  const [myData, setMyData] = useState("Initial Data");

  return (
    <div>
      {myData}
    </div>
  );
}

export default MyFunctionalComponent;

Updating State

To update the state, you should use the `setState` method in class components or the updater function in functional components.

// Class Component
this.setState({ myData: "New Data" });

// Functional Component with Hooks
setMyData("New Data");

Passing State as Props

State can also be passed as props to child components, allowing for a dynamic flow of data.

// Parent Component
<ChildComponent propData={this.state.myData} />

Conclusion

In conclusion, `state` is used to maintain a component’s internal data, whilst `props` are used to transfer data from a parent to a child component. You may easily create dynamic and interactive React applications by grasping these ideas. Learning to use {props} and {state} effectively is essential to mastering React programming. Have fun with coding!

Leave a comment Cancel reply