Understanding Props and States in ReactJS

React.js is one of the most widely used JavaScript libraries that every front-end developer should know. A proper understanding of what props and state are and their differences is a big step towards learning React. Props and State are actually related. Let's get started

React Props

Props are arguments passed into React components. Also, props are passed to components via HTML attributes. React Props are like function arguments in JavaScript and attributes in HTML. Props is short for properties and they are used to pass data between React components. React’s dataflow between components is uni-directional (from parent to child only).

How to pass a data with props from parent to child:

class ParentComponent extends Component {    
    render() {    
        return (       
            // Some data needs to be defined from the parent 
            // component and assigned to a child component’s 
           // “prop” attribute. name is a defined prop here
           // and contains text data.
            <ChildComponent color="crimson" />    
        );  
    }
}

// it is then passed with props in the ChildComponent
const ChildComponent = (props) => {    
    // the dot notation is used to access the prop data 
    // and render it
    return <p>{props.color}</p>; 
};

The prop can also be accessed from the constructor() of the ChildComponent and any other method in this class can reference the props using this.props

class ChildComponent extends Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

React State

React components has a built-in state object which allows components to create and manage their own data i.e. it is where property values that belong to the component are stored. When the state object changes, the component re-renders. Unlike props, components cannot pass data with state, but they can create and manage it internally which that may change over the lifetime of the component.

How to use state: The state object is initialized in the constructor and refer to the state object anywhere in the component by using the this.state.propertyname syntax. To change a value in the state object, use the this.setState() method. When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).

class Car extends Component {
  constructor(props) {
    super(props);
    // initialize the state object
    this.state = {
        brand: "Ford",
        model: "Mustang",
        color: "red",
        year: 1964
    };
  }

  changeColor = () => {
    this.setState({color: "blue"});
  }

  render() {
    return (
      <div>
         // using the state object properties
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
         // updates the value of color to 'blue'
        <button type="button" onClick={this.changeColor}>
              Change color
       </button>
      </div>
    );
  }
}

N/B:

• The state of one component will often become the props of a child component.
• State shouldn’t be modified directly – the setState( ) should be used.
• State affects the performance of your app, and therefore it shouldn’t be used unnecessarily.

Finally, let's see the differences between Props and State.

• Props are used to pass data, whereas state is for managing data
• Components receive data from outside with props, whereas they can create and manage their own data with state.
• Props can only be passed from parent component to child (unidirectional flow).
• Data from props is read-only, and cannot be modified by a component that is receiving it from outside
• State data can be modified by its own component, but is private (cannot be accessed from outside).
• Modifying state should happen with the setState ( ) method.

Thank you for reading! I hope this helps someone

Happy Coding!