State:<\/strong><\/h3>\n

\n
• It is an updatable structure that is used to contain data or information about the component and can change over time.<\/li>\n
• State\u00a0Can be modified using this.setState. <\/strong>State can be asynchronous<\/strong><\/li>\n
• The component can be directly accessed or modified inside the component.<\/li>\n
• It is kept as simple as possible.<\/li>\n
• It represents the component’s local state or information.<\/li>\n<\/ul>\n

  <\/p>\n

  For Example,<\/p>\n

  <\/div>

  class Test extends React.Component {        constructor() {            this.state = {                  id: 1,                  name: "kaashiv"            };      }            render() {            return (                  <div>                      <p>{this.state.id}<\/p>                      <p>{this.state.name}<\/p>                  <\/div>            );      }}<\/code><\/pre> <\/div>\n
  Props:<\/h3>\n
  \n
  In UI that components in React are used again and again.<\/li>\n
  In the component, we need to change the content inside.<\/li>\n
  It is an object which stores the value of attributes of a tag and works similarly to the HTML attributes.<\/li>\n
  From one component to other components, It allows the passing of data.<\/li>\n
  While inside the component we cannot modify the props, because they are immutable.<\/li>\n
  They are used to passing data between React components.<\/li>\n<\/ul>\n
  <\/p>\n
  For Example,<\/p>\n
   
   <\/div> 
  class ParentComponent extends Component {        render() {            return (                    <ChildComponent name="Second Child" \/>            );      }}const ChildComponent = (props) => {        return <p>{props.name}<\/p>; <\/code><\/pre> <\/div>\n
  Difference between State and Props :<\/strong><\/h3>\n\n\n\n\n\n\n\n\n\n\n\n
  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0State<\/em><\/strong><\/td>\n
  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0Props<\/em><\/strong><\/td>\n<\/tr>\n
  Data passed within the component only.<\/td>\n
  \u00a0Data passed from one component To another.<\/td>\n<\/tr>\n
  It becomes Mutable.<\/td>\n
  \u00a0It becomes immutable<\/td>\n<\/tr>\n
  It is for both read and write.<\/td>\n
  \u00a0It is only for read.<\/td>\n<\/tr>\n
  It becomes long for properties.<\/td>\n
  It becomes short for properties.<\/td>\n<\/tr>\n
  It can be modified.<\/td>\n
  It cannot be modified.<\/td>\n<\/tr>\n
  Performance is worse.<\/td>\n
  Performance is better.<\/td>\n<\/tr>\n
  It should be managed in your view-controller<\/td>\n
  It is used to pass data down from your view-controller<\/td>\n<\/tr>\n
  It pass down with props instead.<\/td>\n
  It is used to\u00a0pass data to child components.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"
  State: It is an updatable structure that is used to contain data or information about the component and can change over time. State\u00a0Can be modified using this.setState. State can be asynchronous The component can be directly accessed or modified inside the component. It is kept as simple as possible. It represents the component’s local state […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[16542],"tags":[16632,16636,16638,16627,16639,16631,16626,16633,16634,16629,16628,16635,16637,16642,16643,16641,16640,16630],"class_list":["post-3963","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-difference-between-props-and-state-in-react-with-example","tag-props-and-state-in-react","tag-props-in-react","tag-props-vs-state-in-react","tag-props-vs-this-props","tag-react-state","tag-reactjs-state-vs-props","tag-state-and-props-in-react-js","tag-state-and-props-in-react-native","tag-state-vs-props","tag-what-are-the-difference-between-props-and-state","tag-what-is-props-in-react-js","tag-what-is-state-in-react","tag-what-is-stats-and-props-in-angular","tag-what-is-stats-and-props-in-html","tag-what-is-stats-and-props-in-javascript","tag-what-is-stats-and-props-in-react","tag-what-is-the-difference-between-state-and-props-in-react"],"yoast_head":"\n