Props and State in React with Examples

Table Of Contents

• What are Props?
• What is State?
• Combining Props and State
• Frequently Asked Questions (FAQS)
• How do you initialize state in a React component?
• How does state differ from props?
• Can you pass state as a prop to a child component?
• What happens when state changes in React?
• Can a React component have both props and state?

In React, handling data is essential for creating interactive user interfaces. Two key concepts that help with this are props and state. Props (short for properties) allow components to receive data from their parent components. This makes components reusable and flexible. Props are immutable, meaning they cannot change once passed. This ensures a one-way flow of data, keeping components predictable. On the other hand, state manages dynamic data that can change inside the component itself. State is mutable, allowing updates based on user actions or other events. These changes cause the component to re-render.

Understanding props and state is essential to mastering React. They work together to manage data across components. Props enable easy communication between components by passing information down the tree. State ensures components stay dynamic and responsive to changes. Using both effectively helps build scalable and maintainable applications. In this guide, I’ll walk through examples of props and state in React to show how they shape React’s component-based structure.

What are Props?

Props, short for properties, are a way of passing data from parent to child components in React. They are read-only, which means they cannot be modified by the component that receives them.

Example 1: Passing Data to Child Components

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="John" />;
}

Here, Welcome is a child component that receives name as a prop from the App parent component.

Explore: How Can You Pass Props to Children Components in React?

What is State?

State is a built-in React object used to contain data or information about the component. A component’s state can change over time, usually in response to user actions.

Explore: Event Handling in Reactjs

Example 2: A Simple Counter

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

This example shows a Counter component that increments its count state when a button is clicked.

Explore: Form Handling in React JS

Our training programs

Example 3: Toggling Visibility

class ToggleVisibility extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isVisible: true };
  }

  toggle = () => {
    this.setState(state => ({
      isVisible: !state.isVisible
    }));
  };

  render() {
    return (
      <div>
        {this.state.isVisible ? <p>Visible Content</p> : null}
        <button onClick={this.toggle}>Toggle Visibility</button>
      </div>
    );
  }
}

This demonstrates how to toggle the visibility of an element based on the component’s state.

Explore: Component Composition in React

Combining Props and State

Props and state can be used together to create interactive and dynamic components.

Example 4: User Greeting

function Greeting(props) {
  return <h1>Welcome back, {props.name}!</h1>;
}

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = { userName: "Alice" };
  }

  render() {
    return <Greeting name={this.state.userName} />;
  }
}

Here, the User component maintains the user’s name in its state and passes it as a prop to the Greeting component.

Explore: React Hooks: Revolutionizing Functional Components

Example 5: Updating Parent State from Child

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
  }

  updateMessage = (msg) => {
    this.setState({ message: msg });
  }

  render() {
    return (
      <div>
        <Child onUpdate={this.updateMessage} />
        <p>Message: {this.state.message}</p>
      </div>
    );
  }
}

function Child(props) {
  return <button onClick={() => props.onUpdate('Hello from Child!')}>Update Parent</button>;
}

This example shows how a child component (Child) can update the state of its parent (Parent) using a function passed as a prop.

Explore: React Router Interview Questions

Frequently Asked Questions (FAQS)

1. What are props in React?

Props in React stand for properties, and they act as a way for components to receive data from their parent components. In simple terms, props are arguments passed into React components. They are used to pass data from one component to another and are typically passed from a parent component to a child component. Props are immutable, which means once they are passed, they cannot be changed by the child component that receives them.

Props allow us to create dynamic components that can render based on different data. For example, I can pass a title prop to a Header component, and that component will render different titles based on the value of that prop. This makes React components reusable since I can just change the props instead of writing new code.

Here’s a simple example:

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

In the parent component, I pass the name prop like this:

const App = () => {
  return <Greeting name="John" />;
};

In this example, the Greeting component receives the name prop from the parent App component and uses it to display “Hello, John!”. The key thing to remember is that props are read-only in the child component, so I cannot modify them inside the child.

2. How do you pass props to a component in React?

To pass props to a component, I simply need to define them as attributes when rendering the child component inside a parent component. Let me show you an example. In the parent component, I can pass a name prop like this:
Here’s a more detailed example. Let’s say I have a UserProfile component that expects name and age props:

const UserProfile = (props) => {
  return (
    <div>
      <h1>Name: {props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
};

Then, in the parent component, I can pass these values like this:

const App = () => {
  return <UserProfile name="Alice" age={25} />;
};

In this example, UserProfile is rendered with name="Alice" and age={25} as props. The child component displays the user’s name and age using the props passed from the parent. This is how I can dynamically render components by passing different props values.

3. Can props be changed in a child component?

No, props in React are read-only and cannot be modified by the child component. This is a crucial concept because it ensures that components do not directly modify the data they receive from their parent. Once the parent passes the props to the child, they remain constant throughout the lifecycle of that component. If a child component needs to modify some data, I will have to use state instead of props, which is mutable and controlled within the component itself.

However, a child component can interact with props by using them to display information or perform operations, but it cannot directly alter the props. If I need to change the props, the parent component must handle the logic for changing the data and pass the updated props back down to the child.

Here’s an example:

const Parent = () => {
  const [message, setMessage] = useState("Hello!");

  const updateMessage = () => {
    setMessage("Goodbye!");
  };

  return <Child message={message} updateMessage={updateMessage} />;
};

const Child = (props) => {
  return (
    <div>
      <h1>{props.message}</h1>
      <button onClick={props.updateMessage}>Change Message</button>
    </div>
  );
};

In this case, the Child component cannot modify the message prop directly, but it can call the updateMessage function passed from the parent. This triggers the parent to update its state, which in turn updates the prop value passed to the child.

4. What is state in React?

State in React refers to data that is specific to a component and can change over time. Unlike props, which are passed from parent to child and cannot be changed by the child, state is managed within the component itself. I can think of state as private data that belongs to a component. Whenever the state changes, the component re-renders to reflect those changes in the UI.

Let’s say I am building a counter component. I would use state to keep track of the current count, which would be updated every time the user clicks a button. React provides the useState hook in functional components, which allows me to set and update state. For example:

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

In this example, count is the state variable initialized to 0. The increment function calls setCount to update the count when the button is clicked. Every time the state changes, React re-renders the component to reflect the new count.

State is different from props because it is local to the component, and I can change it using the setter function (setCount). This allows components to handle internal data that evolves over time.

5. How do you initialize state in a React component?

In functional components, I initialize state using the useState hook, which is a built-in React hook that allows me to add state to functional components. The useState function returns two values: the current state and a function to update the state. Here’s how I can initialize state in a React component:

const Toggle = () => {
  const [isOn, setIsOn] = useState(false);

  const toggleButton = () => {
    setIsOn(!isOn);
  };

  return (
    <button onClick={toggleButton}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
};

In this example, I initialize the state variable isOn to false. The toggleButton function changes the state when the button is clicked, switching it between true and false.

In class-based components (if using older React syntax), I initialize state inside the constructor, like this:

class ToggleClass extends React.Component {
  constructor() {
    super();
    this.state = {
      isOn: false
    };
  }

  toggleButton = () => {
    this.setState({ isOn: !this.state.isOn });
  };

  render() {
    return (
      <button onClick={this.toggleButton}>
        {this.state.isOn ? "ON" : "OFF"}
      </button>
    );
  }
}

Here, I initialize the state in the constructor and use this.setState to update it.

6. How does state differ from props?

The key difference between state and props in React is that props are immutable and passed from parent to child, whereas state is mutable and maintained within the component itself. This distinction is important for managing how components render and re-render based on data changes.

Props are used to pass data and functions down to child components, but the child cannot change that data. The parent controls the props. State, on the other hand, is used to store data that can change during the component’s lifecycle. I control state within the component and can update it using setState in class components or the useState hook in functional components.

Another key difference is that changes in state trigger re-renders, meaning the component will update whenever the state changes. In contrast, props alone do not trigger a re-render unless the parent component passes new values.

To illustrate this difference, here’s an example of a component with both state and props:

const UserProfile = (props) => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div>
      <h1>{props.name}</h1>
      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? "Stop Editing" : "Edit Profile"}
      </button>
    </div>
  );
};

In this example:

• Props (name) is passed from a parent component to display the user’s name.
• State (isEditing) is local to the UserProfile component and controls whether the user is in edit mode.

7. Can you pass state as a prop to a child component?

Yes, I can pass state from a parent component down to a child component as a prop. In React, props allow me to send data to child components, and this data can include the current state of the parent component. This is a common pattern when I want to share state across different components.

For example, let’s say I have a parent component that tracks the number of clicks in its state, and I want to display that count in a child component. I can pass the state value as a prop like this:

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  return <ChildComponent count={count} />;
};

In the child component, I can now access the count prop:

const ChildComponent = (props) => {
  return <h1>{props.count}</h1>;
};

By passing state as a prop, I maintain the ability to update the state in the parent component while rendering the updated value in the child. This makes React flexible for creating dynamic UIs where different components share and display the same data.

8. How do you update state in React?

To update state in a functional component, I use the setter function that is returned by the useState hook. Whenever I need to update the state, I call this setter function with the new value, and React will handle re-rendering the component to reflect the updated state. For example, if I want to update a count state, I would do it like this:

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
};

Each time handleClick is called, it updates the count by incrementing it by 1. This is how React enables components to update dynamically based on user interactions or other events.

In class components, I use the setState() method to update the state. For example:

this.setState({ count: this.state.count + 1 });

The key takeaway is that in React, I never modify the state object directly. Instead, I always use the appropriate method (setCount or setState) to update it. This ensures React can track the changes and trigger re-renders when needed.

9. What happens when state changes in React?

When state changes in React, it triggers a re-render of the component. React compares the new state with the previous state and determines what part of the UI needs to be updated. This process is called reconciliation, and it ensures that only the necessary portions of the DOM are updated, rather than the entire component.

For example, if I update the count state in a counter component, React will detect the change and only update the part of the DOM where the count is displayed. The rest of the component will remain untouched, which improves performance.

React’s ability to update the UI efficiently based on state changes is one of the reasons it’s so powerful. Instead of manually updating the DOM, React handles everything behind the scenes. As a developer, I just need to focus on updating the state and React will take care of the UI updates for me.

10. Can a React component have both props and state?

Yes, a React component can have both props and state. In fact, it’s very common for components to use both. Props allow me to receive data from parent components, while state allows me to manage internal data that can change over time.

For example, I might have a component that receives a title prop from a parent and also manages its own count state:

const MyComponent = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{props.title}</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

In this case, the title is passed in as a prop, and the count is managed as state. Both props and state work together to make the component dynamic and responsive to user interactions. Props allow me to customize the component from the outside, while state gives me control over internal changes.

Conclusion

Understanding props and state is crucial for mastering React.js. Props allow components to interact and share data in a unidirectional flow, while state enables them to maintain and update their data. By combining these two concepts, you can build complex and interactive web applications with ease.

Remember, React’s power lies in its simplicity and the efficiency of its data flow mechanisms. Practice these examples and experiment with them to deepen your understanding of React.js core concepts. Happy coding!

CRS Info Solutions stands out for its exceptional React.js training in Hyderabad, tailored specifically for students. Their program focuses on practical, hands-on learning, ensuring that students not only understand React.js training Bangalore concepts but also apply them effectively in real-world scenarios. This approach has established CRS Info Solutions as a go-to destination for aspiring React.js developers in the region.