{"id":1351,"date":"2021-06-02T18:11:48","date_gmt":"2021-06-02T12:41:48","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=1351"},"modified":"2021-06-02T18:11:48","modified_gmt":"2021-06-02T12:41:48","slug":"react-create-simple-counter-use-function-inline-css-and-call-function-in-react","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/","title":{"rendered":"React: Create Simple Counter Use Function, Inline CSS and Call function in React"},"content":{"rendered":"<p>React: Create Simple Counter Use Function, Inline CSS and Call function in React<\/p>\n<p>&nbsp;<\/p>\n<pre>import React, { useState } from 'react';\r\n\r\nconst UseStateCounter = () =&gt; {\r\n    \r\n    const [value, setValue] = useState(0);\r\n    const reset = () =&gt; {\r\n        setValue(0);\r\n    }\r\n    \r\n  return &lt;&gt;\r\n        &lt;section style={{ margin : '4rem 0'}}&gt;\r\n            &lt;h2&gt;Regular Counter&lt;\/h2&gt;\r\n            &lt;h1&gt;{value}&lt;\/h1&gt;\r\n            &lt;button className=\"btn\" onClick={() =&gt; setValue(value - 1)}&gt;Decrease&lt;\/button&gt;\r\n            &lt;button className=\"btn\" onClick={reset}&gt;Reset&lt;\/button&gt;\r\n            &lt;button className=\"btn\" onClick={() =&gt; setValue(value + 1)}&gt;Increase&lt;\/button&gt;\r\n        &lt;\/section&gt;\r\n      &lt;\/&gt;;\r\n};\r\n\r\nexport default UseStateCounter;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>React: Create Simple Counter Use Function, Inline CSS and Call function in React &nbsp; import React, { useState } from &#8216;react&#8217;; const UseStateCounter = () =&gt; { const [value, setValue] [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1351","post","type-post","status-publish","format-standard","hentry","category-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React: Create Simple Counter Use Function, Inline CSS and Call function in React - MyFreeOnlineTools<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React: Create Simple Counter Use Function, Inline CSS and Call function in React - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"React: Create Simple Counter Use Function, Inline CSS and Call function in React &nbsp; import React, { useState } from &#039;react&#039;; const UseStateCounter = () =&gt; { const [value, setValue] [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-02T12:41:48+00:00\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"React: Create Simple Counter Use Function, Inline CSS and Call function in React\",\"datePublished\":\"2021-06-02T12:41:48+00:00\",\"dateModified\":\"2021-06-02T12:41:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/\"},\"wordCount\":27,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"articleSection\":[\"React\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/\",\"name\":\"React: Create Simple Counter Use Function, Inline CSS and Call function in React - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"datePublished\":\"2021-06-02T12:41:48+00:00\",\"dateModified\":\"2021-06-02T12:41:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React: Create Simple Counter Use Function, Inline CSS and Call function in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React: Create Simple Counter Use Function, Inline CSS and Call function in React - MyFreeOnlineTools","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:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/","og_locale":"en_US","og_type":"article","og_title":"React: Create Simple Counter Use Function, Inline CSS and Call function in React - MyFreeOnlineTools","og_description":"React: Create Simple Counter Use Function, Inline CSS and Call function in React &nbsp; import React, { useState } from 'react'; const UseStateCounter = () =&gt; { const [value, setValue] [&hellip;]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2021-06-02T12:41:48+00:00","author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"React: Create Simple Counter Use Function, Inline CSS and Call function in React","datePublished":"2021-06-02T12:41:48+00:00","dateModified":"2021-06-02T12:41:48+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/"},"wordCount":27,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"articleSection":["React"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/","url":"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/","name":"React: Create Simple Counter Use Function, Inline CSS and Call function in React - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"datePublished":"2021-06-02T12:41:48+00:00","dateModified":"2021-06-02T12:41:48+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-create-simple-counter-use-function-inline-css-and-call-function-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React: Create Simple Counter Use Function, Inline CSS and Call function in React"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=1351"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1351\/revisions"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=1351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=1351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=1351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}