useState

In notebook:
FrontEndMasters Intermediate React
Created at:
2019-06-22
Updated:
2019-08-15
Tags:
React libraries JavaScript

https://frontendmasters.com/courses/intermediate-react-v2/usestate/

What was convered in the introduction course

useState, useEffect, useContext were covered and they make up 95% of the code you are going to be writing.

useState

Going through index.js

  //****Index.js****

import React...

// standard functional component with hooks
const StateComponent = () => {
  // setting up the default value
  // it returns the tuple,
  // firt is the value
  // second is the updater function
  const [isGreen, setIsGreen] = useState(true)
  return (
    <h1
      onClick={() => setIsGreen(!isGreen)}
      style={{ color: isGreen ? 'limegreen' : 'crimson'}}
    > 
      useState Example
    </h1>
  )
}

export default StateComponent

More on hooks

You can define as many "states" (governed by hooks) in your function as you want.

They are statements, so cannot be called in an if statement etc.