{"id":5340,"date":"2022-11-06T14:24:47","date_gmt":"2022-11-06T19:24:47","guid":{"rendered":"https:\/\/www.cloudsurph.com\/?p=5340"},"modified":"2022-11-06T14:26:02","modified_gmt":"2022-11-06T19:26:02","slug":"how-to-use-props-and-state-in-react","status":"publish","type":"post","link":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/","title":{"rendered":"ReactJS: How to use Props and State"},"content":{"rendered":"

In this article, we can try to define ReactJS: how to use props and state, react state and props, and how to use props and state in react.<\/p>\n

What is the Definition of Props and State<\/strong><\/h3>\n

Props<\/h4>\n

Props are read-only components. So, Props is an object which stores the value of attributes of a tag and works similarly to the HTML attributes.<\/p>\n

Props allow passing data from one component to another components. Props are similar to function arguments and can be passed to the component the same way as arguments passed in a function.<\/p>\n

we cannot modify the props from inside the component because Props are fixed.<\/p>\n

State<\/h4>\n

The state is information about the component and can change over time or an updatable structure that is used to contain data.<\/p>\n

The State change in state can happen as a response to user action or system event and it is the heart of the react component which determines the behavior of the component and how it will render.<\/p>\n

So, a state must be kept as simple as possible. Also, it represents the component’s local state or information.<\/p>\n

Hence, it can only be accessed or modified inside the component or by the component directly.<\/p>\n

Difference between Props and State<\/h3>\n
    \n
  1. Props are read-only where State changes can be asynchronous.<\/li>\n
  2. Props are immutable where State is mutable.<\/li>\n
  3. Props allow you to pass data from one component to other components as an argument where State holds information about the components.<\/li>\n
  4. Props are external and controlled by whatever renders the component where The State is internal and controlled by the React Component itself.<\/li>\n
  5. Props make components reusable where the State cannot make components reusable.<\/li>\n
  6. Stateless components can have Props where Stateless components cannot have State.<\/li>\n
  7. Props are used to communicate between components where States can be used for rendering dynamic changes with the component.<\/li>\n
  8. Props can be accessed by the child component whereas State cannot be accessed by child components.<\/li>\n
  9. Both are plain JS objects, contain default values, and are read-only when they are used by this.<\/li>\n<\/ol>\n

    Using Props<\/h3>\n

    Now, we can consider Comment<\/strong>\u00a0as a component:<\/p>\n

    \r\nfunction Comment(props) {\r\nreturn (\r\n<div className=\"Comment\">\r\n<div className=\"UserInfo\">\r\n<img className=\"Avatar\"\r\nsrc={props.author.avatarUrl}\r\nalt={props.author.name}\r\n\/>\r\n<div className=\"UserInfo-name\">\r\n{props.author.name}\r\n<\/div>\r\n<\/div>\r\n<div className=\"Comment-text\">\r\n{props.text}\r\n<\/div>\r\n<div className=\"Comment-date\">\r\n{formatDate(props.date)}\r\n<\/div>\r\n<\/div>\r\n);\r\n}\r\n<\/pre>\n
    This is also hard to reuse individual parts of it and components can be tricky to change because of all the nesting.<\/p>\n
    You can check our article: AdonisJS: REST API simple CRUD Operation<\/a>. IF you want then buy a good, reliable, secure web\u00a0hosting<\/a>\u00a0service \u00a0from here:\u00a0click here<\/a><\/em><\/strong><\/p>\n
    So, it accepts\u00a0the author<\/strong>\u00a0(an object),\u00a0text<\/strong>\u00a0(a string), and\u00a0date<\/strong>\u00a0(a date) as props, and describes a comment on a social media website.<\/p>\n
    So, let\u2019s extract a few components from it. Firstly, we will extract\u00a0Avatar:<\/p>\n
    \r\nfunction Avatar(props) {\r\nreturn (\r\n<img className=\"Avatar\"\r\nsrc={props.user.avatarUrl}\r\nalt={props.user.name}\r\n\/>\r\n);\r\n}\r\n<\/pre>\n
    Secondly, we can now simplify\u00a0Comment\u00a0a tiny bit:<\/p>\n
    \r\nfunction Comment(props) {\r\nreturn (\r\n<div className=\"Comment\">\r\n<div className=\"UserInfo\">\r\n<Avatar user={props.author} \/>\r\n<div className=\"UserInfo-name\">\r\n{props.author.name}\r\n<\/div>\r\n<\/div>\r\n<div className=\"Comment-text\">\r\n{props.text}\r\n<\/div>\r\n<div className=\"Comment-date\">\r\n{formatDate(props.date)}\r\n<\/div>\r\n<\/div>\r\n);\r\n}\r\n<\/pre>\n
    Next, extract a\u00a0UserInfo<\/strong>\u00a0component that renders an\u00a0Avatar\u00a0next to the user\u2019s name:<\/p>\n
    \r\nfunction UserInfo(props) {\r\nreturn (\r\n<div className=\"UserInfo\">\r\n<Avatar user={props.user} \/>\r\n<div className=\"UserInfo-name\">\r\n{props.user.name}\r\n<\/div>\r\n<\/div>\r\n);\r\n}\r\n<\/pre>\n
    Now, lets us simplify\u00a0Comment\u00a0even further:<\/p>\n
    \r\nfunction Comment(props) {\r\nreturn (\r\n<div className=\"Comment\">\r\n<UserInfo user={props.author} \/>\r\n<div className=\"Comment-text\">\r\n{props.text}\r\n<\/div>\r\n<div className=\"Comment-date\">\r\n{formatDate(props.date)}\r\n<\/div>\r\n<\/div>\r\n);\r\n}\r\n<\/pre>\n
    You can purchase your\u00a0hosting from Cloudsurph.com<\/a>,\u00a0Cloudsurph hosting<\/a>\u00a0is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs<\/strong>.<\/em><\/h5>\n
    Using State<\/h3>\n
    Firstly, we will move the\u00a0date<\/strong>\u00a0from props to state in below three steps:<\/p>\n
    1. Replace props.date<\/strong>with\u00a0this.state.date<\/strong>\u00a0in the\u00a0render()<\/strong>\u00a0method:<\/h5>\n
    \r\nclass Clock extends React.Component {\r\nrender() {\r\nreturn (\r\n<div>\r\n<h1>Hello, world!<\/h1>\r\n<h2>It is {this.state.date.toLocaleTimeString()}.<\/h2>\r\n<\/div>\r\n);\r\n}\r\n}\r\n<\/pre>\n
    2. After then, Add a class constructor<\/a>that assigns the initial\u00a0state<\/strong>:<\/h5>\n
    \r\nclass Clock extends React.Component {\r\nconstructor(props) {\r\nsuper(props);\r\nthis.state = {date: new Date()};\r\n}\r\nrender() {\r\nreturn (\r\n<div>\r\n<h1>Hello, world!<\/h1>\r\n<h2>It is {this.state.date.toLocaleTimeString()}.<\/h2>\r\n<\/div>\r\n);\r\n}\r\n}\r\n<\/pre>\n
    Here, note how we pass\u00a0props<\/strong>\u00a0to the base constructor and Class components should always call the base constructor with\u00a0props<\/strong>.<\/p>\n
    \r\nconstructor(props) {\r\nsuper(props);\r\nthis.state = {date: new Date()};\r\n}\r\n<\/pre>\n
    3. Finally, Remove the dateprop from the <Clock \/> element:<\/h5>\n
    \r\nroot.render(<Clock \/>);\r\n<\/pre>\n
    So, we will later add the timer code back to the component itself and the result looks like this:<\/p>\n
    \r\nclass Clock extends React.Component {\r\nconstructor(props) {\r\nsuper(props);\r\nthis.state = {date: new Date()};\r\n}\r\nrender() {\r\nreturn (\r\n<div>\r\n<h1>Hello, world!<\/h1>\r\n<h2>It is {this.state.date.toLocaleTimeString()}.<\/h2>\r\n<\/div>\r\n);\r\n}\r\n}\r\nconst root = ReactDOM.createRoot(document.getElementById('root'));\r\nroot.render(<Clock \/>);\r\n<\/pre>\n
    If you enjoyed reading this article and have more questions please reach out to our\u00a0support team<\/a>\u00a0via live chat or\u00a0email<\/a>\u00a0and we would be glad to help you. we provide server\u00a0hosting<\/a>\u00a0for all types of need and we can even get your\u00a0server<\/a>\u00a0up and running with the service of your choice.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In this article, we can try to define ReactJS: how to use props and state, react state and props, and how to use props and state in react. What is the Definition of Props and State Props Props are read-only components. So, Props is an object which stores the value of attributes of a tag […]<\/p>\n","protected":false},"author":8,"featured_media":5342,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[157,25,159,151,44,1,31],"tags":[54,47,105,103,48,113],"class_list":["post-5340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-centos-7","category-web-hosting-virtualization","category-linux-server","category-react-js","category-kvm-xen","category-virtual-private-servers","category-web-hosting","tag-best-vps-hosting-server-maryland","tag-cheap-cloud-servers","tag-cheap-storage-server-hosting","tag-cheapest-vps","tag-dedicated-server-hosting-in-washington-d-c","tag-speed-test-vps"],"yoast_head":"\nhow to use props and state in react<\/title>\n<meta name=\"description\" content=\"ReactJS, how to use props and state, react state and props, how to use props and state in react, State and Props \u2013 React\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"how to use props and state in react\" \/>\n<meta property=\"og:description\" content=\"ReactJS, how to use props and state, react state and props, how to use props and state in react, State and Props \u2013 React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudsurph Web Hosting Washington D.C.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CloudSurph\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-06T19:24:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-06T19:26:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/11\/how-to-use-props-and-state-in-ReactJS.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1264\" \/>\n\t<meta property=\"og:image:height\" content=\"760\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rony\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cloudsurph\" \/>\n<meta name=\"twitter:site\" content=\"@Cloud_Surph\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rony\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/\"},\"author\":{\"name\":\"Rony\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\"},\"headline\":\"ReactJS: How to use Props and State\",\"datePublished\":\"2022-11-06T19:24:47+00:00\",\"dateModified\":\"2022-11-06T19:26:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/\"},\"wordCount\":653,\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/how-to-use-props-and-state-in-ReactJS.jpg\",\"keywords\":[\"Best VPS hosting server Maryland\",\"Cheap Cloud Servers\",\"Cheap Storage Server Hosting\",\"Cheapest VPS\",\"Dedicated Server Hosting in Washington D.C\",\"Speed test VPS\"],\"articleSection\":[\"CentOS 7\",\"Cloud Hosting\",\"Linux Server\",\"React Js\",\"Virtualization\",\"VPS Servers\",\"Web Hosting\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/\",\"name\":\"how to use props and state in react\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/how-to-use-props-and-state-in-ReactJS.jpg\",\"datePublished\":\"2022-11-06T19:24:47+00:00\",\"dateModified\":\"2022-11-06T19:26:02+00:00\",\"description\":\"ReactJS, how to use props and state, react state and props, how to use props and state in react, State and Props \u2013 React\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/how-to-use-props-and-state-in-ReactJS.jpg\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/how-to-use-props-and-state-in-ReactJS.jpg\",\"width\":1264,\"height\":760},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-use-props-and-state-in-react\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.cloudsurph.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ReactJS: How to use Props and State\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"name\":\"Cloudsurph Web Hosting Washington D.C.\",\"description\":\"Dedicated Server Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.cloudsurph.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\",\"name\":\"CloudSurph Technology Solutions\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"width\":2348,\"height\":1692,\"caption\":\"CloudSurph Technology Solutions\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/CloudSurph\\\/\",\"https:\\\/\\\/x.com\\\/Cloud_Surph\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\",\"name\":\"Rony\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"caption\":\"Rony\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/cloudsurph\"],\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/author\\\/ron\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"how to use props and state in react","description":"ReactJS, how to use props and state, react state and props, how to use props and state in react, State and Props \u2013 React","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/","og_locale":"en_US","og_type":"article","og_title":"how to use props and state in react","og_description":"ReactJS, how to use props and state, react state and props, how to use props and state in react, State and Props \u2013 React","og_url":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/","og_site_name":"Cloudsurph Web Hosting Washington D.C.","article_publisher":"https:\/\/www.facebook.com\/CloudSurph\/","article_published_time":"2022-11-06T19:24:47+00:00","article_modified_time":"2022-11-06T19:26:02+00:00","og_image":[{"width":1264,"height":760,"url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/11\/how-to-use-props-and-state-in-ReactJS.jpg","type":"image\/jpeg"}],"author":"Rony","twitter_card":"summary_large_image","twitter_creator":"@cloudsurph","twitter_site":"@Cloud_Surph","twitter_misc":{"Written by":"Rony","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/#article","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/"},"author":{"name":"Rony","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed"},"headline":"ReactJS: How to use Props and State","datePublished":"2022-11-06T19:24:47+00:00","dateModified":"2022-11-06T19:26:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/"},"wordCount":653,"publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"image":{"@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/11\/how-to-use-props-and-state-in-ReactJS.jpg","keywords":["Best VPS hosting server Maryland","Cheap Cloud Servers","Cheap Storage Server Hosting","Cheapest VPS","Dedicated Server Hosting in Washington D.C","Speed test VPS"],"articleSection":["CentOS 7","Cloud Hosting","Linux Server","React Js","Virtualization","VPS Servers","Web Hosting"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/","url":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/","name":"how to use props and state in react","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/#primaryimage"},"image":{"@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/11\/how-to-use-props-and-state-in-ReactJS.jpg","datePublished":"2022-11-06T19:24:47+00:00","dateModified":"2022-11-06T19:26:02+00:00","description":"ReactJS, how to use props and state, react state and props, how to use props and state in react, State and Props \u2013 React","breadcrumb":{"@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/#primaryimage","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/11\/how-to-use-props-and-state-in-ReactJS.jpg","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/11\/how-to-use-props-and-state-in-ReactJS.jpg","width":1264,"height":760},{"@type":"BreadcrumbList","@id":"https:\/\/www.cloudsurph.com\/how-to-use-props-and-state-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cloudsurph.com\/"},{"@type":"ListItem","position":2,"name":"ReactJS: How to use Props and State"}]},{"@type":"WebSite","@id":"https:\/\/www.cloudsurph.com\/#website","url":"https:\/\/www.cloudsurph.com\/","name":"Cloudsurph Web Hosting Washington D.C.","description":"Dedicated Server Hosting","publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cloudsurph.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.cloudsurph.com\/#organization","name":"CloudSurph Technology Solutions","url":"https:\/\/www.cloudsurph.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","width":2348,"height":1692,"caption":"CloudSurph Technology Solutions"},"image":{"@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CloudSurph\/","https:\/\/x.com\/Cloud_Surph"]},{"@type":"Person","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed","name":"Rony","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","caption":"Rony"},"sameAs":["https:\/\/x.com\/cloudsurph"],"url":"https:\/\/www.cloudsurph.com\/author\/ron\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/comments?post=5340"}],"version-history":[{"count":2,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5340\/revisions"}],"predecessor-version":[{"id":5344,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5340\/revisions\/5344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media\/5342"}],"wp:attachment":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media?parent=5340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/categories?post=5340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/tags?post=5340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}