If you are a programmer using React, you are probably familiar with using Props or State in components.
But do you know the difference between them?
If not, let’s find out together.
Props
- Props is an object that holds the values of a tag’s attributes and is how components receive values passed in from the outside.
For example:
1 2 3 4 5 6 7 8 | <span class="token keyword">function</span> <span class="token function">XinChao</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token operator"><</span> h1 <span class="token operator">></span> Xin chào <span class="token punctuation">{</span> props <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM <span class="token punctuation">.</span> <span class="token function">createRoot</span> <span class="token punctuation">(</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'root'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span> XinChao name <span class="token operator">=</span> <span class="token string">"Sara"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">;</span> root <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> element <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- Here we have passed the
nameproperty into the XinChao component’s props . - Each component’s property will correspond to an attribute of the tag and the value of that attribute will be passed to the props property.
- You can change the Props using setProps or replaceProps but it is not recommended that you use them because React has a rule that is pure function: do not change the input value and always return 1 type of format ( Props are Read-Only)
State
- Just like props , state also stores information about the component, but stores the dynamic data of a component.
- State is dynamic data, it allows a component to track information that changes between renders and make it interactive.
- State can only be used within a component that spawned it.
- If the component needs to manage state, it should be created in a class component rather than a function component.
For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">class</span> <span class="token class-name">Clock</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> date <span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> Xin chào <span class="token operator">!</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> h2 <span class="token operator">></span> <span class="token constant">B</span> ây giờ là <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> date <span class="token punctuation">.</span> <span class="token function">toLocaleTimeString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> h2 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM <span class="token punctuation">.</span> <span class="token function">createRoot</span> <span class="token punctuation">(</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'root'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> root <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Clock <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- With the above example, when we enter the page at 22:20:58 , we will get the result
- And every time we f5 the time will change.
- To keep the time up to date, you can learn more about lifecycle methods .
Props and State
Alike
- Both to be the basic object in React and when changing the value will perform render .
Other
| Props | State | |
|---|---|---|
| Data Management | Passing data to component is like passing param in function | managed inside the component |
| Change data in component | No (due to data being passed in) | Yes (due to being managed inside the component) |
| Change data from parent component | Have | Are not |
Ending
- Above is what I know about props and state in React hope it will help everyone.
- Thank you everyone for reading my post if you find it useful, please upvote for me!