{"id":29232,"date":"2021-02-15T09:36:16","date_gmt":"2021-02-15T17:36:16","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=29232"},"modified":"2022-07-20T08:43:50","modified_gmt":"2022-07-20T15:43:50","slug":"react-state-the-basics","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/","title":{"rendered":"React State: The Basics"},"content":{"rendered":"\n

Have you ever heard of state<\/code> in the JavaScript library React but don\u2019t know how to use it? State refers to \u201chow each object on a web page appears.\u201d The concept is simple \u2014  it\u2019s a collection of data related to the component\u2019s current state, which can be modified by changing the data that describes it. Each time the data changes, it re-renders on the computer screen. <\/p>\n\n\n\n

The most difficult part about state is knowing how and when to use it. But don\u2019t worry because this tutorial covers how state is used.<\/p>\n\n\n\n

To give you a brief overview, to set the initial state, you use this.state<\/code> in a JavaScript constructor. To update the state, use the setState<\/code> method. We will talk more about state and some ways to use state in this tutorial.<\/p>\n\n\n\n

What is React State?<\/h2>\n\n\n\n

React state is an object with a set of properties you designate for a component, and that contributes to how the component is rendered. A component that has state<\/code> is referred to as stateful. You generally use it if a component needs to keep track of information related to it between renderings.<\/p>\n\n\n\n

An example would be a \u201clike\u201d button component that needs to track the number of times it\u2019s clicked on. This has to be re-rendered on the screen each time the like-button is hit to show the updated number of likes. And for that, we have to make sure the like-button component keeps track of the information, instead of just repeatedly rendering the information we coded with it. After all, you don\u2019t want to lose those likes.<\/p>\n\n\n\n

A component\u2019s state data can be accessed via this.state<\/code> and changed by using the .setState<\/code> method. State is private as it can only be changed by the component that contains the state.<\/p>\n\n\n\n

Many people confuse state with props, another react object, but there are major differences<\/a> between the two. One of them is that state is dynamic, meaning data it holds can change and thereby affect the component\u2019s behavior. Props, on the other hand, are immutable, which means that \u201cits state cannot change after it is constructed.\u201d<\/p>\n\n\n\n

React State Syntax<\/h2>\n\n\n\n

State is initially defined in the function named constructor. This is because even though state can change, we want to make sure there\u2019s an initial value present. The general format for defining state is:<\/p>\n\n\n\n

this.state={ attribute:"value");<\/pre><\/div>\n\n\n\n
For example, if you are making a timer component, you must define the starting-off state as this.state={seconds:0}<\/em>. You know that a timer will change its state every second, but it has to start its count somewhere. The component you are coding in is referred to as \u201cthis\u201d. This statement changes the component\u2019s state by setting one of its attributes (\u201cseconds\u201d) to be equal to the value you choose to define (\u201c0\u201d in this case).  <\/p>\n\n\n\n
Here is a sample index.js file for a component named \u201cPerson\u201d. We will add four values \u2014 name, occupation, hair, and age \u2014 to the state object in the component:<\/p>\n\n\n\n
\/\/basic React import statements<\/em><\/p>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom';<\/pre><\/div>\n\n\n\n
\/\/Component we named “Person”, with state properties defined in the constructor:<\/em><\/p>\n\n\n\n
class Person extends React.Component {\n\t\tconstructor(props) {\n\t\t\t\tsuper(props);\n\t\t\t\tthis.state = {\n\t\t\t\t\t\tname: "Tom Hiddleston",\n\t\t\t\t\t\toccupation: "Actor",\n\t\t\t\t\t\thair: "black",\n\t\t\t\t\t\tage: 40\n\t\t};\n}<\/pre><\/div>\n\n\n\n
\/\/A render function that defines what will be rendered on the screen: <\/em><\/p>\n\n\n\n
render() {\n\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t\t<h1>\n\t\t\t\t\t\t\tPerson\n\t\t\t\t\t\t<\/h1>\n\t\t\t\t<\/div>\n\t\t\t);\n\t\t}\n}\nReactDOM.render(<Play \/>, document.getElementById('root'));<\/pre><\/div>\n\n\n\n
The last line is saying that the code will go through your HTML document and look for the element that has the id \u201croot\u201d, and render what you have instructed it to do in the render()<\/code> method above. This is why you must make sure to add the following inside of the document body of your index.html file:<\/p>\n\n\n\n
<div id="root"> <\/div><\/pre><\/div>\n\n\n\n
This HTML tag has the ID attribute set to \u201croot\u201d. This is where everything you asked the component to render will go.<\/p>\n\n\n\n
Referring to the State Object<\/h2>\n\n\n\n
You can refer to the state object by writing this.state.attributeName<\/em>. Doing this will replace \u201cattributeName\u201d with the attributes defined.<\/p>\n\n\n\n
Here is an example using the properties we defined earlier to make up the state of our \u201cPerson\u201d component. We will use the {this.state.attribute} format to call on the attribute value for the component we are writing our code in. <\/p>\n\n\n\n
In this case, we will copy the following method into our \u201cPerson\u201d component, which will be what \u201cthis\u201d refers to. The screen will show the value belonging to the attribute we wrote. Replace the render()<\/code> statement from our \u201cPerson\u201d component in the last example with this one:
<\/p>\n\n\n\n
render() {\n\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t\t<h1>\n\t\t\t\t\t\t\t{this.state.name}\n\t\t\t\t\t\t<\/h1>\n\t\t\t\t\t\t<p>\n\t \t\t\t\t\t\t{this.state.name} is an {this.state.occupation} and is\n\t \t\t\t\t\t\t{this.state.age} years old. His hair is currently\n\t\t\t\t\t\t\t{this.state.hair}.\n\t\t\t\t\t\t<\/p>\t\n\t\t\t\t<\/div>\n\t);\n}<\/pre><\/div>\n\n\n\n
The screen will render a heading with the value of the attribute \u201cname\u201d, which is Tom Hiddleston. Under that will be a paragraph stating, \u201cTom Hiddleston is an Actor and is 40 years old. His hair is currently black.\u201d <\/p>\n\n\n\n
The .setState() Method<\/h2>\n\n\n\n
Use this.setState()<\/em> to update a state object\u2019s values. This method takes one argument, which will be a new attribute and its value: {attribute: \u201cnew value\u201d }<\/em>. Methods are used to do this because React will call the render method behind the scenes so your new content is always rendering.<\/p>\n\n\n\n
Here\u2019s an example using our \u201cPerson\u201d component from earlier. Add the following code to the \u201cPerson\u201d component code we saw at the beginning of the article.<\/p>\n\n\n\n
  1. Add an occupation changing function to \u201cPerson\u201d in the class\u2019 body. This function will call the .setState<\/code> method. The attribute written here is the occupation attribute and we write the value we want to change it to. Recall from the \u201cPerson\u201d component code that the occupation is currently \u201cactor\u201d.

    occupation = () =>{this.setState({occupation :\u201dmodel\u201d});} <\/em>

    <\/li>
  2. Insert the following button code inside of the .render()<\/code> method\u2019s main <div>. It will add a button that calls the occupation function when a user clicks it, hence the \u201conClick\u201d attribute. The button will have \u201cOccupation Change!\u201d written inside it.

      <button type=\u201dbutton\u201d onClick={this.occupation}>Occupation Change!<\/button><\/em> <\/li><\/ol>\n\n\n\n
    And there you have it! Now, you can see a button that calls the function from step one. The method contains a .setState()<\/code> method wherein the occupation attribute is set to have a new value, \u201cmodel\u201d.<\/p>\n\n\n\n
    Multiple .setState()<\/code> methods are not processed in order, so this may present conflicts you should be aware of \u2014 read more about those here<\/a>. This is important because when your code grows bigger and there are more lines and more React states written, you have to think of how they will work together. This can be hard to do, especially with React\u2019s asynchronous nature, where you can\u2019t predict in what order your setState methods are going to be processed. <\/p>\n\n\n\n
    Do You Have to Use State?<\/h2>\n\n\n\n
    The simple answer is no, you don\u2019t. There are two main types of React components: functional components and class components. Components without state are functional components. By default, there is no State in a component \u2014 you have to create it yourself.<\/p>\n\n\n\n
    Without state, your app won\u2019t be very interactive, however. Even if you do opt for implementing state, it is recommended that you aren\u2019t overzealous in your use of it. This is because excessively using State in components can make it hard to foresee possible conflicts due to the complexity involved.<\/p>\n\n\n\n
    Wrapping Up<\/h2>\n\n\n\n
    State and Props are two important objects to keep in mind when using React. State keeps track of a component\u2019s current state as it changes depending on the update to the data that defines a state. Props, on the other hand, don\u2019t change.  A simple rule of thumb regarding which to use is to ask \u201cWill this component\u2019s attributes be changed at any point?\u201d. If the answer is \u201cyes\u201d, then you want to use State category, since Props is immutable. <\/p>\n\n\n\n
    Before diving fully into React<\/a>, make sure you\u2019re familiar with the JavaScript ES6<\/a> syntax, since React makes use of many of its features, such as arrow functions, classes, and variable types. Also, there were changes to React regarding using state and other features without having to write a class in the recent React update, React Hooks<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"Have you ever heard of state in the JavaScript library React but don\u2019t know how to use it? State refers to \u201chow each object on a web page appears.\u201d The concept is simple \u2014  it\u2019s a collection of data related to the component\u2019s current state, which can be modified by changing the data that describes…","protected":false},"author":114,"featured_media":11907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-29232","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nReact State: The Basics | Career Karma<\/title>\n<meta name=\"description\" content=\"A brief look into React state, what it means, and some examples using it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React State: The Basics\" \/>\n<meta property=\"og:description\" content=\"A brief look into React state, what it means, and some examples using it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-15T17:36:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-20T15:43:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yessenia Mata\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yessenia Mata\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/\"},\"author\":{\"name\":\"Yessenia Mata\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/616533dc6ff37b9111aad55631595ec3\"},\"headline\":\"React State: The Basics\",\"datePublished\":\"2021-02-15T17:36:16+00:00\",\"dateModified\":\"2022-07-20T15:43:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/\"},\"wordCount\":1313,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/\",\"name\":\"React State: The Basics | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"datePublished\":\"2021-02-15T17:36:16+00:00\",\"dateModified\":\"2022-07-20T15:43:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/616533dc6ff37b9111aad55631595ec3\"},\"description\":\"A brief look into React state, what it means, and some examples using it.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/react-state-the-basics\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React State: The Basics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/616533dc6ff37b9111aad55631595ec3\",\"name\":\"Yessenia Mata\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/TD8SYPRGU-U01LTPHLWG2-ef37ec165b60-512-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/TD8SYPRGU-U01LTPHLWG2-ef37ec165b60-512-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/TD8SYPRGU-U01LTPHLWG2-ef37ec165b60-512-150x150.jpg\",\"caption\":\"Yessenia Mata\"},\"description\":\"Yessenia is a technical writer at Career Karma. In addition to contributing to Career Karma as a writer, Yessenia currently works in IT in the San Francisco Bay Area. She has experience with programming languages including Java, Python, HTML, CSS, and JavaScript and is double majoring in CNIT and Computer Science.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/yessenia-m\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React State: The Basics | Career Karma","description":"A brief look into React state, what it means, and some examples using it.","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:\/\/careerkarma.com\/blog\/react-state-the-basics\/","og_locale":"en_US","og_type":"article","og_title":"React State: The Basics","og_description":"A brief look into React state, what it means, and some examples using it.","og_url":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-02-15T17:36:16+00:00","article_modified_time":"2022-07-20T15:43:50+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","type":"image\/jpeg"}],"author":"Yessenia Mata","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Yessenia Mata","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/"},"author":{"name":"Yessenia Mata","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/616533dc6ff37b9111aad55631595ec3"},"headline":"React State: The Basics","datePublished":"2021-02-15T17:36:16+00:00","dateModified":"2022-07-20T15:43:50+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/"},"wordCount":1313,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/react-state-the-basics\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/","url":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/","name":"React State: The Basics | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","datePublished":"2021-02-15T17:36:16+00:00","dateModified":"2022-07-20T15:43:50+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/616533dc6ff37b9111aad55631595ec3"},"description":"A brief look into React state, what it means, and some examples using it.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/react-state-the-basics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/react-state-the-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"React State: The Basics"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/616533dc6ff37b9111aad55631595ec3","name":"Yessenia Mata","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2021\/02\/TD8SYPRGU-U01LTPHLWG2-ef37ec165b60-512-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2021\/02\/TD8SYPRGU-U01LTPHLWG2-ef37ec165b60-512-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2021\/02\/TD8SYPRGU-U01LTPHLWG2-ef37ec165b60-512-150x150.jpg","caption":"Yessenia Mata"},"description":"Yessenia is a technical writer at Career Karma. In addition to contributing to Career Karma as a writer, Yessenia currently works in IT in the San Francisco Bay Area. She has experience with programming languages including Java, Python, HTML, CSS, and JavaScript and is double majoring in CNIT and Computer Science.","url":"https:\/\/careerkarma.com\/blog\/author\/yessenia-m\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/29232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/114"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=29232"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/29232\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/11907"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=29232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=29232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=29232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}