Most beginner like me will have a bit of confusion about when to use state and when to use props, which component should have its own state or rely on props and how to go about it all.
Both state and props hold information, but they are different. The props are immutable, whereas the state is not. Typically, the child component receives the props variables from parents. They store the props variables in the state as they can’t modify props values. They take in read only copy and use it only to render the view of the component. Even the actons can be passed to children in the form of props, and if any event affects the parent’ state, the child calls that action(method) which is defined in parent.
Anything that can change due to an event anywhere in the component hierarchy qualifies as being part of the state. Avoid keeping computed values in the state; instead simply compute them when needed, typically inside the render() method.
Do not copy props into a state, just because props are immutable. If you feel the need to do this, think of modifying the original state from which these props were derived. One exception is when props are used as initial values to the state, and the state is truly disjoined from the original state after the initialization.