React.js is a javascript library that every front-end developer should need to know and learn. It allows us to build Single Pages Applications(SPA) and reusable UI components.
Here I am going to describe the basics of Props and State that many beginner want to know.
Props:- Props are used to pass data between react components, like function argument in JavaScript.
React props component flow is like parents to child.
Example of Props:-
class ParentComponent extends Component {
render() {
return (
<ChildComponent name="First Child" />
);
}
}
const ChildComponent = (props) => {
return <p>{props.name}</p>;
};State:- React component has another special built-in state object, which allows a component to store and manage their own data.
The best part of the react state is that when the state changed it automatically re-renders the component internally.
Example of State:-
class Test extends React.Component {
constructor() {
this.state = {
id: 1,
name: "test"
};
}
render() {
return (
<div>
<p>{this.state.id}</p>
<p>{this.state.name}</p>
</div>
);
}
}We use setState() method to modify the value of state.
this.setState({
id: "2020"
});
