React Components Explained: Props and State with Simple Examples

A React component is a small, reusable piece of a web page — like a button, a card, or a full profile box — written as a JavaScript function. Components receive data through props, which work like function inputs, and they remember their own changing data with state. Once you understand components, props and state, you understand the heart of React. This guide explains all three with simple examples.

What Is a Component in React?

Think of a website as a LEGO model. Instead of building one giant block, you build many small blocks and join them. In React, each small block is a component. A big app is just components inside components: an app component holds a header component, a product list component, and many product card components.

A component is a normal JavaScript function that returns JSX — a mix of HTML-like code inside JavaScript. Here is the simplest possible component:

function Welcome() {
  return <h1>Hello, welcome to my website!</h1>;
}

export default Welcome;

Notice two things. The function name starts with a capital letter — React needs this to know it is a component, not a normal HTML tag. And the returned code looks like HTML, but it is JSX. If JavaScript basics like functions and arrays are new for you, first revise our guide on JavaScript array methods, because React uses them everywhere.

Props: Passing Data into a Component

Props is short for "properties". Props let you pass data from a parent component to a child component, so the same component can show different content in different places. It works exactly like passing arguments to a function.

function StudentCard(props) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>Course: {props.course}</p>
    </div>
  );
}

// Using the same component with different data
<StudentCard name="Asha" course="React" />
<StudentCard name="Ravi" course="Python" />

One component, two students, two different cards. This reusability is the main reason big websites are built with React — you write the card once and use it a hundred times with different props. One important rule: a component can never change its own props. Props are read-only data given by the parent.

State: Data That Changes Inside a Component

State is a component's own memory. It stores data that can change when the user does something — clicking a button, typing in a box, opening a menu. When state changes, React automatically re-renders the component and shows the new value on the screen. In modern React, you create state with the useState hook:

import { useState } from "react";

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Here, count is the current value and setCount is the function you call to change it. Every click updates the state, and React updates the screen instantly. You never change count directly, like count = 5 — always use the setter function, otherwise React will not know the value changed.

Props vs State: The Simple Difference

A good memory trick: props are like the settings you choose when buying a phone — decided outside. State is like the battery level — it lives inside the phone and changes all the time.

How Props and State Work Together

In real apps, state often lives in a parent and flows down as props to children. For example, a parent holds the state cartCount. It passes that value as a prop to the header, which shows a cart badge, and it passes the update function to the product cards, which add items. This pattern — state up, props down — is the standard way React apps are organised, and you will see it in every professional project. When your practice projects grow, store them well: our guide on what GitHub is and why it is important shows how developers save and share React projects.

Common Beginner Mistakes

• Changing props directly. Never write props.name = "New". If data must change, it should be state in the parent, passed down again as a fresh prop.
• Forgetting the capital letter. A component named studentCard will not work as a tag. Always start component names with a capital letter.
• Updating state like a normal variable. Writing count++ changes nothing on screen. Always call the setter, like setCount(count + 1).
• Putting everything in one component. If a file grows very long, split it into smaller components. Small components are easier to read, test, and reuse.

Frequently Asked Questions

What is JSX in React?

JSX is a syntax that lets you write HTML-like code inside JavaScript. Browsers do not understand JSX directly — React's tools convert it into normal JavaScript when the app builds.

Can a component have both props and state?

Yes, most real components use both. They receive data through props from the parent and also keep their own small state, like whether a dropdown is open or closed.

What is useState in simple words?

useState is a React hook that gives a component a memory. It returns the current value and a function to update it. When the value updates, React redraws the component.

Should data be props or state?

Ask one question: does this data change because of something inside this component? If yes, it is state. If it only comes from the parent and never changes here, it is props.

Conclusion

Components are the building blocks of every React app, props pass data down into them, and state gives them a memory that can change. Build the small examples in this guide — a welcome component, a student card with props, and a counter with useState — and you have learned the foundation on which every React and Next.js app is built.