Absolute Beginners: React State & Props

Start React applications with some key points about states and props in managing state and its object without referencing React Hooks to understand the flow of data with access, ease, and success.

Both props and state are simply: plain JavaScript objects — The movement of data: States can be passed onto other components through props. Stateful components require us needing to access the state by making changes to the components, whereas stateless components, the input and output of data will not change at all. Props are how components communicate with each other. Therefore, the “state” becomes local to the component and the only way for it to be passed down is through props components.

import {childComponent} from ‘./components/childComponent’ 
class parentComponent extends React.Component {
     ...
     render() {
        return (
           <childComponent name=“First Child!” />
           );
       }
}
export default parentComponent
const childComponent = (props) => {return <p>{prop.name}</p>;}

What is State?
With State (or components that are stateful) we are then allowed access to state management by creating and managing data. Unlike stateless components, any stateful class components will contain those initialized attributes with values to start from the component at this local level.

class ParentComponent extends Component {
//1st option initialize state object (more modern syntax)
   state = {
       name: "Ginny"
    } 
//2nd option to intialize state object by adding the class constructor that assigns the initial this.state
   constructor(props) {
      super(props);
      this.state = {name: "Ginny"};
   }
// Here we went from mounting to updating by the time our flow of data approaches the render() method. From here we can print out what we expect to appear on the webpage
// the render()'s return() will need this () to support JSX's span over multiple lines now, with an enclosing <div> tag for React expects only a single element returned 
render() { 
      return(
          <div>
            <h1>What's your name?</h1>
            <h2>My name is {this.state.name}</h2>. 
{ /* //or try this */}
            <h2>My name is {this.props.name}</h2>.
          <div/>
       )
    }
}
export default ParentComponent

In order to update any state, we will need setState() method to appropriately modify state.

//wrong approach to modify state
this.state.id = “2222”;
//CORRECT approach to modify state
this.setState({id: “2020”});

More about setState(): .setState()-here is where the state can be changed within the component — this ensures that we do not modify the state directly.
React will not render the component when we try to update the state directly on the browser, even though from the console, state is updating itself. Therefore, please utilize setState() to update the state component. Calls to setSet() are asynchronous.
What are Props? Props are derived from the word, Properties. In React, Props are stateless and are meant to be read-only components in the application, about how data are being passed uni-directionally from parent to child, only.

Props are written in functional components in this syntax and never written like class components:

const childComponent = (props) => {return <p>{prop.name}</p>;}

This function above contains “props” in the argument of childComponent’s component, so this props (argument) will be used to passed data by chaining the defined prop of “name” that contains the text data of “name”. Furthermore, we can either maintain the naming of the “props” argument (per convention) at this point, or customized it to fit the need, looks, and readability in the applications (could be totally confusing) — totally optional here.

import {childComponent} from ‘./components/childComponent’ 
class parentComponent extends React.Component {
     ...
     render() {
        return (
           <childComponent name=“First Child!” />
           );
       }
}

We must remember that our data are processed through React Lifecycle Methods in 3 main phases: Mounting, Updating, and Unmounting.

React Component Lifecyce Methods Diagram Link

Ultimately, only focus on this React Component Lifecycle Methods Diagram (above), like a “starter kit”, to grasp state and props, with a holistic and commonly used approach on the flow of data, as a guide, when working with state and props.

Happy coding!