props are read-only, and components cannot modify their props. I want more explanation with examples

Question

function Component (props){
return <Hello, {props.name} />;
}

Answer 1

This is probably react code.
But in any of this frameworks, our goal is to never modify props from children.

If we change value of prop, we will triger rerender of components, when we don't won't to, what will create bugs in our app.
In react we send method to change props to children and then we run this method on child component. This method because it is send by parent, modify parent state. This is proper way of doing.

Avoid using methods for string/array what directly modify value.
If you need to use some, create copy of value and run this code on copied value.
If we try to do this in other way component will rerender before next line of code is readed.

This is why it is read-only, modifying it directly will create issues in code.

This discussion may help you more to understand this topic:
https://stackoverflow.com/questions/51435476/why-props-in-react-are-read-only

And here is how to update props in right way:
https://www.freecodecamp.org/news/how-to-update-a-components-prop-in-react-js-oh-yes-it-s-