Props and State in React

In React, both props and state are essential concepts which are used to manage and control the behavior and appearance of components.

Props or properties are used to pass data between the components (parent to child, child to parent, between siblings etc.). They are immutable which means they can’t change only they can be passed. It provides a way to make components reusable by allowing the parent to configure the child components.

Example:

Javascript

// Parent Component
const ParentComponent = () => {
    return <ChildComponent name="John" age={25} />;
};
 
// Child Component
const ChildComponent = (props) => {
    return (
        <div>
            <p>Name: {props.name}</p>
            <p>Age: {props.age}</p>
        </div>
    );
};

State helps make the React application dynamic and allows for updates based on requirements. Unlike props, state can be modified within the component using its setState function, triggering re-renders to reflect the updated state.

Example:

Javascript

const Counter = () => {
    const [count, setCount] = React.useState(0);
 
    const incrementCount = () => {
        setCount(count + 1);
    };
 
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={incrementCount}>Increment</button>
        </div>
    );
};

Essential things to know as React Developer

React is an open-source JavaScript library used to create user interfaces in a declarative and efficient way. It is a component-based front-end library responsible only for the view layer of a Model View Controller(MVC) architecture. React is used to create modular user interfaces and promotes the development of reusable UI components that display dynamic data. This article covers all the essential topics provided by ReactJS which every developer should know.

Table of Content

Why we should learn ReactJS
JSX and its expressions.
React Virtual DOM
Props and State in React
Components in React
State Management in React
React Hooks
Performance
Lifecycle Methods in React
Conditional Rendering

Props and State in React

Javascript

Javascript

Essential things to know as React Developer

Similar Reads