Basic Difference between Props and State – React.js

June 30, 2020 · 1 min read

React.js is a javascript library that every front-end developer should need to know and learn. It allows us to build Single Pages Applications(SPA) and reusable UI components.

Here I am going to describe the basics of Props and State that many beginner want to know.

Props:- Props are used to pass data between react components, like function argument in JavaScript.

React props component flow is like parents to child.

Example of Props:-

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent name="First Child" />    
        );  
    }
}

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

State:- React component has another special built-in state object, which allows a component to store and manage their own data.

The best part of the react state is that when the state changed it automatically re-renders the component internally.

Example of State:-

class Test extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            name: "test"    
        };  
    }    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}

We use setState() method to modify the value of state.

this.setState({           
    id: "2020"
});

Facebook

Twitter