Props are changing in value (they should be read-only)

June 22, 2022

Here is my code:

function Headline(props) {
  
  props.text = "I have changed.";
  
  return (
    <h1>{props.text}</h1>
  );
}

let title = <Headline text="Do Not Change" />;


let app = document.getElementById("app");
ReactDOM.createRoot(app).render(title);

The documentation on React website seems to imply that Props are read only (https://reactjs.org/docs/components-and-props.html#props-are-read-only). Why was I able to change its value then, because the final output for me was "I have changed.".

>Solution :

The documentation you link to says don’t do that not it is impossible to do that.

The changed value renders because you change it before the first render. If it had rendered and then you, later on, changed it (e.g. from a click callback) then that wouldn’t trigger a re-render.