Understanding Props and State in ReactJS: A Guide to Unidirectional Data Flow

To begin with, let’s explore the flow of data in React.js. React supports unidirectional data flow.

Unidirectional Data Flow

The unidirectional data flow, also known as one-way data binding, is a design pattern commonly used in ReactJS. It refers to the way data flows through a React application, where data flows in a single direction, from parent components to child components, but never in the opposite direction.

Props and state are two important concepts in ReactJS, a JavaScript library for building user interfaces.

What are the pros of ReactJS?

Props, short for properties, are data passed to a child component from its parent component. They are used to configure and control the behavior of a component.

To use props in a component,

they must first be passed as attributes to the component when it is rendered by its parent component. The component can then access the props using this.props object. For example, if a component is rendered with the attribute name="John", the component can access the value of the name prop using this.props.name.

Passing date though props in class component.

class Child extends React.Component {

  return <h2>I am a { this.props.userName }!</h2>;
}

class Parent extends React.Component {
  return (
    <>
      <h1>User detail </h1>
      <Child userName="Sahil Hussain" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Parent />);

Passing date though props in function component.

function Child(props) {
  return <h2>My self { props.userName }!</h2>;
}

function Parent() {
  return (
    <>
      <h1>User detail </h1>
      <Child userName="Sahil Hussain" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Parent />);

What is the State of ReactJS?

State, on the other hand, is an object that stores data that can change within a component. It is used to keep track of the component’s internal state and can be modified by the component itself.

To use state in a component,

the component must first initialize its state in the constructor function. The component can then update its state using this.setState() method. For example, if a component has a state variable name, it can update the value of the name state variable using this.setState({ name: 'John' }).

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

In a functional component, we create state using the useState() hook, as we will discuss in our upcoming blog post on hooks.

Different between props and State.

Props

• The Data is passed from one component to another.
• It is Immutable (cannot be modified).
• Props can be used with state and functional components.
• Props are read-only.

State

• The Data is passed within the component only.
• It is Mutable ( can be modified).
• The state can be used only with the state components/class component (Before 16.0).
• The state is both read and written.

In conclusion,

props and state are two important concepts in React.js that help to control the behavior and render the content of a component. Props are used to pass data from parent components to child components and are read-only, while the state is used to store data that can change within a component and can be modified by the component itself. The unidirectional data flow pattern, where data flows in a single direction, is enforced by React’s Virtual DOM and helps to maintain consistency and predictability in a React application. Understanding and effectively using props and state is crucial for building efficient and maintainable React applications.