State vs Props Demystified in React

The foundation of understanding component relationships in React and parent component hierarchy begins with fully grasping the concepts behind state and props. Think of state like a cup of coffee. There are different points in time when your coffee has different temperatures from burning hot, warm, not so warm, in between and cold. Similarly, state describes the specific condition of your app at a specific point in time. State is essentially a special JavaScript object and set of data managed by components. It can be changed and fully controlled by the component. State helps us to keep track of selected data and changes frequently. Ultimately, state influences what’s rendered in the browser.

Props stands for properties. It is an object that passes values and data from parent to the child component. These values can be strings, objects, arrays or functions. Props help make our component more dynamic. Props passes values into components (function parameters). Props are immutable. This means that data passed down from the parent cannot be passed down by children components. Props holds info/data that influence the User Interface (UI) in the browser. I hope this gave you a clearer understanding of state and props!