Skip to main content

Can props be changed inside a component?

ReactJunior~2 min read
Suggest an edit

Short answer: No, props cannot be changed inside a component.

Why props cannot be changed

props (from "properties") are input data that are passed to a component by its parent. They work like function arguments - and by React's rules must be read-only (immutable).

In other words:

A component receives props, but does not own them. Changing them means breaking the one-way data flow principle.

Example (what happens if you try to change props)

javascript
function Greeting(props) { props.name = "Maria"; // You must not do this! return <h1>Hello, {props.name}</h1>; }

React will not throw an error, but this is bad practice, because such changes:

  • do not affect the parent component (the data will not update);
  • make the behavior unpredictable;
  • may be overwritten on the next render.

The correct way - use state when you need to change data

If you need data to change inside a component, create your own state based on props.

javascript
function Greeting({ name }) { const [username, setUsername] = useState(name); const changeName = () => setUsername("Maria"); return ( <> <h1>Hello, {username}!</h1> <button onClick={changeName}>Change name</button> </> ); }

Now username is the component's internal state, and React will correctly update the UI when it changes.

Why this matters (React's logic)

React follows the "one-way data flow" principle - data flows only from top to bottom:

javascript
Parent → Child component → JSX

If a child component starts changing props, the chain becomes unpredictable, and React cannot guarantee UI consistency.

What you can safely do with props

You can:

  • read them
  • use them for computations
  • copy them into state on initialization
  • pass them further to other components

You cannot:

  • change props directly (props.x = ...)
  • mutate nested objects inside props (props.user.name = ...)

Example of the correct approach

javascript
function Counter({ initialCount }) { const [count, setCount] = useState(initialCount); return ( <> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>+</button> </> ); }

Parent:

javascript
<Counter initialCount={5} />

Here initialCount is a prop, and count is state, which can be changed.

Summary

WhatAllowed?Why
Read propsYesIt is input data
Change props directlyNoBreaks the one-way data flow
Create a copy in state and change itYesThe component controls its own state
Mutate nested objects in propsNoReact does not track such changes

Main takeaway:

props are a component's parameters, like function arguments. They cannot be changed. If you need to change data - use state.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit