React: Props and State

In React, data always flows from the parent component down to the child component(s) in one direction (unidirectional). Data never flows up from the child to the parent. React passes data from one component to another component by using props. Any data that a component needs to track (store) is passed to a state property. The state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it. Data can be "passed" back to the parent via a callback function and the parent component can then update its data.

Props is a read-only property (object) that is used for the flow of data from a parent component to its child component. The child component can access all the properties it receives via the props object. All data assigned to props are read-only and cannot be changed by the child component. Thus, all React components must act like pure functions with respect to their props.

State is referred to the data (information) at an instant in time during a program run. All properties (variables) you create in a React component have their own state. The data that each property retains can be changed (as state) over time. When a parent component passes a state as a prop to a child component, the state of these variables are read-only and cannot be changed. The value of a variable can be changed only through the state object in the component that owns it.

⭕ About me
I am a Web Instructor at a technical college, Facilitator at Boston University Metropolitan College, Web Instructor at University of California, Irvine - Division of Continuing Education. I’ve authored a textbook and a few video training courses for http://lynda.com (https://www.linkedin.com/learning) and http://www.packtpub.com.

⭕ Check out my author page: http://amazon.com/author/christianhur
⭕ My complete online training courses:
☑️ The DOM in JavaScript, jQuery, AngularJS, and React : https://www.linkedin.com/learning/the-dom-in-javascript-jquery-angularjs-and-react
☑️ Building JSF Web Applications with Java EE 7: https://www.linkedin.com/learning/building-jsf-web-applications-with-java-ee-7
☑️ Troubleshooting Vue.js: https://www.packtpub.com/application-development/troubleshooting-vuejs-video
☑️ Angular 7 New Features: https://www.packtpub.com/web-development/angular-7-new-features-video
☑️ Full-Stack Web Development with Flask: https://www.packtpub.com/web-development/full-stack-web-development-flask-video
☑️ Full-Stack Web Development with Django & Angular 8: https://www.packtpub.com/web-development/full-stack-web-development-with-django-and-angular-8-video

⭕ Check out my book:
Developing Business Applications for the Web: With HTML, CSS, JSP, PHP, ASP.NET, and JavaScript is available on Amazon and MC Press.
☑️ Link: https://www.mc-store.com/collections/christian-hur/products/developing-business-applications-for-the-web-with-html-css-jsp-php-asp-net-and-javascript