Understanding the basics of props and states is an important step towards learning ReactJS. In this blog, I’ll explain props and states, and how to use them while trying to address the most common questions surrounding them.

What are props?

Props are short for ‘properties’ and they assist with passing data between React components. It’s important to note that data passes uni-directionally in React, meaning it flows from parent to child components. Below is an example of how to pass data from a parent component to a child component.

First we need to assign data from a parent component into a child component’s “prop” attribute. The name attribute of the component is the prop and in this instance it contains a text value of Component Name. Within the child component we can use the dot notation to call on the prop data and render it.

class ParentComponent extends Component {
    render() {
        return (
            <ChildComponent  name='Component Name'  />
        )
    }
}

const ChildComponent = (props) => {
    return <p>{props.name}</p>
}

What are states?

React has another special tool built-in that allows a component to create and manage their own data, a state. Unlike props, states cannot pass data to another component but they can be created and managed within a component. Below is an example of how to set a state within a component.

class Example extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id: 1,
            name: "Component"
        }
    }

    render() {
        return (
            <div>
                <p>{this.state.id}</p>
                <p>{this.state.name}</p>
            </div>
        )
    }
}

Remember a change in the state happens based on user-input, triggering an event, and so on. Also, React components are rendered based on the data in the states. All states should hold default information.

You may use the setState() method to change and update the state. Below is an example to toggle a state between true and false. This is a basic navigation component that will load any props and build the default states for the component on render.

class Nav extends React.Component {
    constructor(props) {
        super(props);
        this.classes = this.props.classes
        this.state = {isToggleOn: false}

        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState(state => ({
            isToggleOn: !state.isToggleOn
        }))
     }

    render() {
        return (
            <header>
                <Navbar id='header' className='${this.classes}' expand='xs' fixed='top'>
                    <Container>
                        <div className='navContainer'>
                            <Navbar.Brand className='navbar-header'>
                                <Link to='/'><Logo /></Link>
                            </Navbar.Brand>
                            <Navbar.Toggle className={${this.state.isToggleOn ? 'is-active' : ' '}} onClick={this.handleClick}>
                                ...
                        </div>
                    </Container>
                </Navbar>
            </header>
        )
    }
}

export default Nav

Notice that we bind our handleClick() function as well with the default information. Upon clicking the the navigation’s toggle, we will apply the class name is-active which we can later transition with CSS and/or javascript. The state isToggleOn is changed to the opposite of the original value set when we click on the toggle button. Advancing props into the equation allows you to set default values for your components as required and let each component handle the states.

So when the state changes, React gets informed and immediately re-renders the DOM — not the whole DOM, but only the component with the updated state. Utilizing the setState() method triggers React to quickly update the component and not hinder the user to refresh the entire DOM.

The state of things today

An important question you might ask about states is where exactly we can use them. Years ago, states could only be used in class components, not in functional components. That’s why functional components were also known as stateless components. After React Hooks were introduced into the equation, we can now utilize states both in class and functional components.

I hope this article provides a better understanding on the basics of props and states. Overcoming this hurdle allows one to branch out into the deeper wonders React has to offer frontend development.