React Props vs State Explained for Beginners (With Examples)

In one sentence: props are data a component receives from its parent, and state is data a component manages and can change on its own. Props are read-only. State can be updated with a special function, and updating it makes React redraw the component. If you have ever felt stuck deciding which one to use, this guide will clear it up with plain-English explanations and small code examples you can copy and run.

This guide assumes you already know basic JavaScript, like variables and functions. If some of that feels shaky, it may help to read our guide on JavaScript variables and data types first, then come back here.

A quick reminder: what is a React component?

React is a JavaScript library for building user interfaces out of small, reusable pieces called components. A component is just a JavaScript function that returns some markup, written in a syntax called JSX (JavaScript XML). Here is the smallest possible component:

function Welcome() {
  return <h1>Hello, world!</h1>;
}

Line by line: `function Welcome()` declares a normal JavaScript function. React component names must start with a capital letter, so `Welcome` works but `welcome` would not. The function returns `<h1>Hello, world!</h1>`, which looks like HTML but is actually JSX - React turns it into a real HTML heading on the page. Every component must return exactly one block of markup like this.

What are props in React?

Props (short for "properties") are how a parent component sends data into a child component, similar to how you pass arguments into a JavaScript function. The child component can read the data but cannot change it - props always flow one way, from parent to child.

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

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

Here is what each part does: `Welcome(props)` now accepts a `props` argument, which React fills in automatically. Inside the JSX, `{props.name}` uses curly braces to drop a JavaScript value into the markup - this reads the `name` value out of the `props` object. In the `App` component, `<Welcome name="Maria" />` renders the `Welcome` component and passes it a prop called `name` with the value `"Maria"`. The result on the page is `Hello, Maria!`. If `App` rendered `<Welcome name="Sam" />` instead, the page would say `Hello, Sam!` - the same component, reused with different data.

• Props are passed in from a parent component, like arguments passed into a function.
• Props are read-only - a component must never change its own props.
• Props can be any JavaScript value: a string, a number, an array, an object, or even a function.
• Props make a component reusable, because the same component can look different depending on what data it receives.

What is state in React?

State is data that a component owns and can change over time, such as text typed into an input box or a counter that goes up when a button is clicked. Unlike props, a component is allowed to update its own state. In modern React, you create state with the `useState` hook - a hook is simply a special function that starts with `use` and lets a function component "hook into" React features.

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>
  );
}

Breaking this down: `import { useState } from "react"` brings in the `useState` hook so we can use it. `const [count, setCount] = useState(0)` creates a piece of state called `count`, starting at `0`, and gives us a function called `setCount` to update it - `useState` always returns an array with exactly two items: the current value and a setter function. Inside the markup, `{count}` displays the current value. The button has an `onClick` handler that runs `setCount(count + 1)` every time it is clicked. Calling the setter does two things: it updates the stored value, and it tells React to re-render the component so the new number shows up on screen immediately.

Props vs state: the key differences

Example: a simple form using state

A very common use of state is storing what a user types into a form. This is called a "controlled input", because React state controls the value shown in the input box.

import { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Hello, ${name}!`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <button type="submit">Say hello</button>
    </form>
  );
}

Here, `const [name, setName] = useState("")` creates state that starts as an empty string. The `<input>` element's `value={name}` means the box always shows whatever is stored in state. The `onChange` handler runs on every keystroke and calls `setName(event.target.value)`, which reads the text currently in the box and saves it into state - this is what keeps the input and the state in sync. `handleSubmit` runs when the form is submitted; `event.preventDefault()` stops the browser from reloading the page, which is the default behavior for forms, and then we show an alert using the current `name` value.

Example: rendering a list with props

Props are often used to hand a component a list of data to display. Here, the parent owns the array, and the child just receives it and renders it.

function FruitList({ fruits }) {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

function App() {
  return <FruitList fruits={["Apple", "Banana", "Mango"]} />;
}

`function FruitList({ fruits })` uses destructuring to pull the `fruits` prop straight out of the props object, instead of writing `props.fruits` every time. Inside the JSX, `fruits.map((fruit) => ...)` loops over the array and returns one `<li>` element per fruit. Each `<li>` needs a `key` prop, which is a unique value that helps React keep track of list items efficiently when the list changes - here we use the fruit name itself, since each one is unique. In `App`, the array `["Apple", "Banana", "Mango"]` is passed in as the `fruits` prop, and `FruitList` never modifies it - it just displays it.

Common mistakes beginners make

• Trying to change a prop directly, like `props.name = "New Name"` - this will not work and React may warn you about it. Instead, the parent component must pass a new prop value.
• Forgetting that calling a setter function does not update the variable immediately in the same line of code - the new value is only visible after React re-renders.
• Using state for data that never changes. If a value is fixed and only ever comes from a parent, it should usually be a prop, not state.
• Missing the `key` prop when rendering a list with `.map()`, which can cause odd behavior when items are added, removed, or reordered.

Props and state are the two core ways data flows through a React app: props carry data down from parent to child, and state lets a component manage its own changing data. Once this distinction feels natural, the rest of React - forms, lists, and hooks - starts to make a lot more sense.