C3-State and Props

If you’ve ever dabbled in React or are just getting started, you’ve probably heard of two foundational concepts: state and props. These two concepts work together like the dynamic duo in a superhero movie. Let’s dive in to understand them with simple examples and real-world analogies!

Understanding State with useState

State in React is like your kitchen pantry. Imagine you’re baking cookies, and the number of cookies you’ve baked so far is stored in your pantry. If you bake more or eat some, you update the number in the pantry. Similarly, in React, state holds values that can change over time.

How to Use useState

React provides a hook called useState to manage state in functional components. Here’s how you use it:


import React, { useState } from 'react';

const CookieBaker = () => {
  const [cookies, setCookies] = useState(0); // State: number of cookies

  const bakeCookie = () => {
    setCookies(cookies + 1); // Update state
  };

  return (
    <div>
      <h1>Cookies Baked: {cookies}</h1>
      <button onClick={bakeCookie}>Bake a Cookie</button>
    </div>
  );
}

export default CookieBaker;

What’s Happening Here?

useState(0): Initializes the state with 0 cookies.
setCookies: Updates the state.
Re-rendering: When state changes, React re-renders the component to reflect the new value.

Real-World Analogy: State is like a scoreboard at a basketball game. It updates live as the game progresses, and everyone (like your app’s users) can see the updated score immediately.

How Props Work and When to Use Them

If state is your pantry, props are like the groceries you bring home from the store. You don’t keep everything in the pantry; some things come directly from outside. Similarly, props are data passed to a component from its parent.

Passing Props Example

Let’s say we have a parent component (App) and a child component (CookieCounter).



import React from 'react';

const CookieCounter = ({ count }) => (
  <h2>Total Cookies: {count}</h2>
);

const App = () => (
  <div>
    <CookieCounter count={10} />
  </div>
);

export default App;

What’s Happening Here?

count={10}: The parent (App) sends the number 10 to the child (CookieCounter) as a prop.
{count}: The child receives the prop and uses it to display the total cookies.
Parent-to-Child Data Flow

Props enable a one-way data flow, which means data goes from parent to child but not the other way around. Think of it like passing down a family recipe — the recipe (data) flows from one generation to the next, but younger generations can’t change the original recipe.

Here’s another example where props are used dynamically


import React from 'react';

const Parent = () => {
  const message = "Keep baking cookies!";
  return <Child advice={message} />;
};

const Child = ({ advice }) => <p>{advice}</p>;

export default Parent;

In this example, the Parent component sends a motivational message to the Child, which displays it.

State vs. Props: The Key Difference

State: Managed within a component and can change.

Props: Passed to a component from its parent and are read-only.

State is like your personal diary — you can write and rewrite it anytime. Props are like a postcard you send to someone — the message is fixed when sent.

Try it yourself

Challenge Yourself

Congratulations! You’ve unlocked the basics of state and props. Now it’s time to put them into action.

Your Challenge

Create a small React app with the following: A parent component that keeps track of a counter. A child component that: Displays the counter value using props. Has a button to increment the counter (hint: pass a function as a prop).

Bonus

Add a second child component that displays a motivational message when the counter reaches 10.

Understanding state and props might feel like learning to ride a bike — wobbly at first but smooth once you get the hang of it. Keep practicing, and soon, you’ll be creating amazing React apps! 🚀