Difference between react props vs. state

One of the core concepts of react is the difference between props and state. Only changes in props and state trigger react to re-render components and update the DOM.

The biggest difference is that re-rendering of the component based on input in state is done entirely within the component, whereas you with using props can receive new data from outside the component and re-render.

Props

props allows you to pass data from a parent component to a child component.

//Parent Component
const books = () => {
    return (
<div>
 <Book title = "Data structures and algorithms with JAVA" />
 </div>
   );
}
//Child component
const book = (props) => {
    return ( 
        <div>
            <h1>{props.title}</h1>
        </div>
    )
}

Explanation: Now. ‘props’ is passed in to the child component and the functional component the passes the ‘props’ as an argument which in turn will be handled as an object. The property ‘title’ is accessible in the child component from the parent component.

State

Only class-based react components can define and use state. It’s although possible to pass state to a functional component but functional components can’t edit them directly.

class NewBook extends Component {
    state = {
        number: ''
    };
    render() {
        return ( 
            <div>{this.state.number}</div>
        );
    }
}

As you can see the NewBook component contains a defined state. This state is accessible through this.state.number and can be returned in the render() method.

Comments

[enes-dev]

haha :) I was thinking about how can I reach end of the post when I open the this post,actually when ı see quickly finished I suprised,because sometimes I feel boring,I can lost my self the middle of the post,but thank you,clarify declaration,actually I understand better now, just one points that I should say --> what is that means ? --> Book title = "Data structures and algorithms with JAVA" />

[Hans]

The book "Data Structures and algorithms with JAVA" is the only book I have ever read which made me cry, and not in a good way. If you want to challenge yourself and wish to inflict yourself with some serious trouble you can download it here
bookdepository.com/Data-Structures...

[Ozair]

I've had intention to read the book for a long time, I recently finished my personal MERN Stack project and I think that "now" is the time to make myself cry with "Data Structures and algorithms with JAVA" XD . Wish me luck.
btw here is my project ozfam.herokuapp.com , what do you think.

dev.to/truemail785/mern-stack-soci...

[Ozair]

Good

[Hans]

Thank you!