React.js is the Fastest Growing Javascript Framework because of its Flexibility, Fast and Smooth Development process so everyone accepts it as a web application programming.
Most Newbie and beginners level Developers confuse these terms. When some companies Hire React.js Developers they Ask this type of confusing point to check Knowledge. React state and props are the core concept of React.js Developers. let’s dive into deep
Before moving to the state and props concept discuss of Javascript function and React component. so you can understand from basic
class HelloCoder extends React.Component {
render () {
return <div>Hi Programmer</div>
}
}
We defined an Example of a React.js Function. where we created the HelloCoder function and output of this component Hi Programmer
const HelloCoder = () => console.log(‘Hi Programmer’)
Above is an Arrow function of javascript. also this output of Hi Programmer. what is the difference between them? The first is to show the output in the display and the Javascript function gets output into the console.
In conclusion, React.js function and Javascript function are similar to each other.
React State
State is Local Component storage which means you can’t able to able to access or edit React state outside of Component. it’s totally similar to the local scope variable.
class HelloCoder extends React.Component {
state = {
name: ‘Programmer’
}
render() {
return <div>Hi {this.state.name}</div>;
}
As per the below example state name only accesses in HelloCoder function. the output of this example is Hi Programmer
React Props
React Props play a vital role in popularity. why? we discuss in this section. A component is a Reusable part in React.js so we define it one time and use it again and again. in this process we require to change data or modified. that’s the reason to state come into play crucial role in React. Let’s Break information through Examples.
class HelloCoder extends React.Component {
render() {
return <div>Hi {this.props.name}</div>;
}
}
Declaring Component
<HelloCoder name=coder/>
<HelloCoder name=programmer/>
We can utilise this component with Different data. We pass property into component and get output different. in terms of props is capable to transfer one component to another.
in conclusion use state in the local level component. it is the best option for enhancing UI at the component level and other side props we can transfer data from parents and make it reusable.
Are You want to read more interesting blogs visit here – doodlefolks.com
Are you curious as to what is different between React state and props? here we provided all detail guidance for click here
