Day 4: Learning Props and State in React
7 mins read

Day 4: Learning Props and State in React

Anand Gora0Tagged , , , , ,

Props and State in React are the two core ideas that make your components reusable and interactive. In Day 1–3, we set up the environment and learned JSX & Components. Today we’ll learn how data flows with props, how components remember data with state, and how to use both together.

What are Props in React?

Props (short for properties) let you pass data from a parent component to a child component. Props are read-only—the child should not modify them.

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

export default function App() {
  return (
    <div>
      <Welcome name="Anand" />
      <Welcome name="React Learner" />
    </div>
  );
}
  • App → parent
  • Welcome → child
  • name → prop passed to the child

Key points about props

  • Flow is top-down (parent → child).
  • They make components reusable with different data.
  • Treat them as immutable inside the child.

What is State in React?

State stores data inside a component that can change over time. When state changes, the component re-renders.

We use the useState Hook in functional components.

  • useState is a React Hook that lets you add state (data that changes over time) to functional components.
  • Normally, functional components are stateless, but with useState, they can store and update values just like class components.
import { useState } from "react";

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

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;
  • count → current state
  • setCount → function to update state
  • Updating state triggers a re-render

Props and State in React: Side-by-Side

FeaturePropsState
What is it?Data passed into a componentData owned by the component
Who controls it?ParentComponent itself
Mutable?❌ No (read-only)✅ Yes (via setter like setX)
When to useConfiguration, displayInteractivity, UI that changes

Hands-On: Upgrade Your Portfolio with Props & State

Let’s update on your Day 2 portfolio page. We will update below code and learn Props and State in React with Real Example.

function App() {
  return (
    <div className="font-sans min-h-screen p-8 sm:p-20 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200">
      <main className="flex flex-col items-center gap-12">
        {/* Profile Section */}
        <div className="flex flex-col items-center text-center">
          <img
            src="/profile.jpg"
            alt="Profile Picture"
            className="rounded-full border-4 border-gray-300 dark:border-gray-600 w-32 h-32 sm:w-40 sm:h-40 object-cover"
          />
          <h1 className="text-3xl sm:text-4xl font-bold mt-4">Anand Gora</h1>
          <p className="text-lg text-gray-600 dark:text-gray-400">
            Web Developer • React & Next.js Specialist
          </p>
        </div>

        {/* About Section */}
        <section className="max-w-2xl text-center">
          <h2 className="text-2xl font-semibold mb-2">About Me</h2>
          <p className="text-gray-600 dark:text-gray-400">
            I’m a passionate web developer with 2+ years of experience building
            responsive, user-friendly websites and applications. I specialize
            in React.js, Next.js, and Tailwind CSS, and love turning creative
            ideas into functional products.
          </p>
        </section>

        {/* Skills Section */}
        <section className="max-w-2xl text-center">
          <h2 className="text-2xl font-semibold mb-2">Skills</h2>
          <div className="flex flex-wrap justify-center gap-3 mt-4">
            {["React.js", "Next.js", "Tailwind CSS", "Node.js", "MongoDB", "Strapi"].map(
              (skill) => (
                <span
                  key={skill}
                  className="bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-full text-sm"
                >
                  {skill}
                </span>
              )
            )}
          </div>
        </section>

        {/* Projects Section */}
        <section className="max-w-2xl text-center">
          <h2 className="text-2xl font-semibold mb-4">Projects</h2>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="#"
              className="px-6 py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition"
            >
              View Portfolio
            </a>
            <a
              href="#"
              className="px-6 py-3 rounded-lg border border-gray-400 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition"
            >
              GitHub Profile
            </a>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="mt-12 text-center text-sm text-gray-500 dark:text-gray-400">
        © {new Date().getFullYear()} Anand Gora • Built with Vite+React & Tailwind CSS
      </footer>
    </div>
  );
}

export default App;

We’ll create Profile and About that receives props, and add a show more and show less toggle using state.

First create components folder in src then create Profile.jsx and About.jsx in components.

src/components/Profile.jsx

export default function Profile({ title }) {
    return (
        <div className="flex flex-col items-center text-center">
          <img
            src="/profile.jpg"
            alt="Profile Picture"
            className="rounded-full border-4 border-gray-300 dark:border-gray-600 w-32 h-32 sm:w-40 sm:h-40 object-cover"
          />
          <h1 className="text-3xl sm:text-4xl font-bold mt-4">{title}</h1>
          <p className="text-lg text-gray-600 dark:text-gray-400">
            Web Developer • React & Next.js Specialist
          </p>
        </div>
    );
};

For using props, we replaces this:

<h1 className="text-3xl sm:text-4xl font-bold mt-4">Anand Gora</h1>

👉 with this:

<h1 className="text-3xl sm:text-4xl font-bold mt-4">{title}</h1>

Also update this code:

export default function Profile({ title }) {
  ...
}

Now we will pass props from parent to child component, we will update App.jsx

import Profile from "./components/Profile";

function App() {
  return (
    <div className="font-sans min-h-screen p-8 sm:p-20 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200">
      <main className="flex flex-col items-center gap-12">
        {/* Profile Section */}
        <Profile title="Anand Gora" />

        {/* Rest Code */}

      </main>

      {/* Footer */}
      <footer className="mt-12 text-center text-sm text-gray-500 dark:text-gray-400">
        © {new Date().getFullYear()} Anand Gora • Built with Vite+React & Tailwind CSS
      </footer>
    </div>
  );
}

export default App;

Notice the changes in parent component, App.jsx

import Profile from "./components/Profile";

{/* Profile Section */}
<Profile title="Anand Gora" />

Now we will learn to use the useState React Hook(learn in further tutorials) in functional components. When user will click on show more button, the show more will show you the content of About Component.

src/components/About.jsx

import { useState } from "react";

export default function About() {
  const [showMore, setShowMore] = useState(false);

  return (
    <section className="max-w-2xl text-center">
      <button
        className="px-6 py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition"
        onClick={() => setShowMore(!showMore)}
      >
        {showMore ? "Show Less" : "Show More"}
      </button>
      {showMore && (
        <>
          <p className="mt-4 text-gray-600 dark:text-gray-400">
            I’m Anand Gora, a web developer based in India. I love creating
            beautiful, functional websites and applications that provide
            seamless user experiences. When I’m not coding, you can find me
            exploring new technologies, reading tech blogs, or hiking in the
            mountains.
          </p>
          <h2 className="mt-4 text-2xl font-semibold mb-2">Skills</h2>
          <div className="flex flex-wrap justify-center gap-3 mt-4">
            {["React.js", "Next.js", "Tailwind CSS", "Node.js", "MongoDB", "Strapi"].map(
              (skill) => (
                <span
                  key={skill}
                  className="bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-full text-sm"
                >
                  {skill}
                </span>
              )
            )}
          </div>
          <h2 className="mt-4 text-2xl font-semibold mb-4">Projects</h2>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="#"
              className="px-6 py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition"
            >
              View Portfolio
            </a>
            <a
              href="#"
              className="px-6 py-3 rounded-lg border border-gray-400 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition"
            >
              GitHub Profile
            </a>
          </div>
        </>
      )}
    </section>
  );
};

In About.jsx, we uses these this line for importing useState. 

import { useState } from "react";

And we declare this

const [showMore, setShowMore] = useState(false);
  • showMore → This is the state variable. It holds the current value (true or false in this case).
  • setShowMore → This is the function used to update showMore.
  • useState(false) → Initial value of showMore is false.
setShowMore(!showMore)}> {showMore ? "Show Less" : "Show More"}
  • When button is clicked:
  • If showMore is false, setShowMore(!false) → true
  • If showMore is true, setShowMore(!true) → false
  • This toggles between Show More and Show Less.
{showMore && (
  <p>... extra content ...</p>
)}

useState makes your React components interactive by storing values that can change and re-render the UI whenever those values update.

We will also update final App.jsx

import Profile from "./components/Profile";
import About from "./components/About";

function App() {
  return (
    <div className="font-sans min-h-screen p-8 sm:p-20 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200">
      <main className="flex flex-col items-center gap-12">
        {/* Profile Section */}
        <Profile title="Anand Gora" />

        {/* About Section */}
        <About />

      </main>

      {/* Footer */}
      <footer className="mt-12 text-center text-sm text-gray-500 dark:text-gray-400">
        © {new Date().getFullYear()} Anand Gora • Built with Vite+React & Tailwind CSS
      </footer>
    </div>
  );
}

export default App;

This example shows how State in React makes your UI respond instantly to user actions.

Summary

  • Props and State in React work together: props configure a component, state makes it interactive.
  • Props are read-only; state is local & mutable (via setters like setState/useState).
  • Use props for data flow and callbacks; use state for dynamic UI.

Next (Day 5): Events & Forms in React

Leave a Reply

Your email address will not be published. Required fields are marked *

I’m Anand Gora, a passionate Full Stack Developer and coding blogger. With a B.Tech in Computer Science and hands-on experience in building scalable web applications using the MERN stack (MongoDB, Express.js, React.js, Node.js), I love turning ideas into functional, user-friendly digital products. Over the years, I’ve worked as a MERN Stack Developer and an Editorial Coordinator, which gave me expertise not only in coding but also in content creation, SEO, and digital marketing. This blend of technical and creative experience drives me to share practical coding tutorials, web development insights, and problem-solving tips with the developer community. When I’m not coding or writing, I enjoy experimenting with new frameworks, optimizing applications for performance, and contributing to projects that push the limits of innovation.
Website https://codingjive.com

Related Posts