25:["$","title",null,{"children":"React state & props | Steven Robison | Observable"}] 4b:T611,md `--- ### State When state is provided to a component by it's parent then \`\`props\`\` is perfect. If the state is internal to the component itself then we use \`\`state\`\`. React function components can access the value of and update state using the \`\`useState\`\` function from React #### Example \`\`\` function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return (

You clicked {count} times

); } \`\`\` This example is directly from the react docs (https://reactjs.org/docs/hooks-state.html) > ##### Tip > [Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) is used again to access the return value from a function call to \`\`useState\`\` but it can be written differently Line three shows a call to \`\`useState\`\` with an inital value of '\`\`0\`\`'. The call returns an array of two things - a handle on the current value (\`\`count\`\`) and a method to update that value (\`\`setCount\`\`). The square bracket syntax is destructuring the returned value \`\`count\`\` is just a regular variable and so can be used anywhere in the code. In this example it is used in the returned JSX. The call to \`\`setCount\`\` in the returned JSX shows how we update that bit of state. Updating the state causes the component to be rerendered with the new value`4c:[{"id":"aa7421cac6c76b2f5e98a969366a2fb1c47bff0314d34f537769a41ac5f31563d55b3872ac0bdca8fb329554d2ccaf62337c0aa03ec1096a5ff313f95ddb98ba","href":"https://static.observableusercontent.com/files/aa7421cac6c76b2f5e98a969366a2fb1c47bff0314d34f537769a41ac5f31563d55b3872ac0bdca8fb329554d2ccaf62337c0aa03ec1096a5ff313f95ddb98ba","name":"granular-dom-updates.gif","type":"image/gif","lastModified":1586179767667.508,"size":127160}] 47:{"id":"4bd2aed6f8580ecd","slug":"react-state-props","title":"React state & props","thumbnail":"3bb0e76274224d1a402377646bcac7ad32e40f660e4cddc7f49c114def31af56","access_level":"public","create_time":"$D2020-04-06T13:01:37.577Z","update_time":"$D2020-04-08T08:12:49.905Z","view_time":null,"first_public_time":"$D2020-04-07T14:37:52.130Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"886c43393cb620b8","login":"sgr","name":"Steven Robison","avatar_url":"https://avatars-next.observableusercontent.com/2d5ce11d04a6ee71aa134a8fed2bb09e2a1a5e7ac016cbf6e8960e7776535e30","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":177,"publish_version":177,"role":null,"authored":false,"authors":[{"type":"individual","id":"a275b212c4a7db45","login":"sgr","name":"Steven Robison","avatar_url":"https://avatars-next.observableusercontent.com/2d5ce11d04a6ee71aa134a8fed2bb09e2a1a5e7ac016cbf6e8960e7776535e30","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a275b212c4a7db45","login":"sgr","name":"Steven Robison","avatar_url":"https://avatars-next.observableusercontent.com/2d5ce11d04a6ee71aa134a8fed2bb09e2a1a5e7ac016cbf6e8960e7776535e30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"36c10a92785fefc1","slug":"insyn-pm-ui-refresher","title":"InSyn PM UI Refresher 🦎 🍭","owner":{"id":"886c43393cb620b8","login":"sgr","name":"Steven Robison"}},"type":"notebook","body":{"titling":"auto","title":"React state & props","cells":[{"id":0,"value":"md`# React state & props`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`React gives us UI as a function over it's inputs. Rather than writting JavaScript to manipulate the DOM directly (which can become very tedious) React allows us to wrtie what we want our UI to look like for a given state. React takes care of everything else.\n\nState is encapculated as the \\`\\`props\\`\\` of a component and also it's \\`\\`state\\`\\`. For class components (see last notebook) \\`\\`state\\`\\` is a property of the class. For function based components we use a function provided by React called \\`\\`useState\\`\\` (this is an example of a React hook). Props are always passed in as a parameter to the class or function.\n\nWhen these values change the entire DOM is recalulated.\n\nUpdating the DOM is expensive. React has an internal representation of the DOM called the \"virtual DOM\" which it diffs against the actual DOM in order to determine what it should update.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"FileAttachment(\"granular-dom-updates.gif\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md `---\n### Props\nProps are passed in to a property causing it to rerender. The previous notebook showed how we passed a title into the \\`\\`Welcome\\`\\` component. \n\n> #### Exercise\n> Here is the skeleton of a component. Update it to take props of '\\`\\`name\\`\\`' and then display it in the returned jsx. It will run beneath (remember to press the run button).\n> \n> _See https://reactjs.org/docs/components-and-props.html for further details_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function InSynMember() {\n return jsx`

Hello, ???

Hello

\\`\\`' with a call to your edited \\`\\`InSynMember\\`\\` component with the new \\`\\`name\\`\\` prop. \n>\n> *See the previous notebook for an example how to do this - Remember jsx is a bit wierd in these notebooks*\n> `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"function ParentComponent(){\n return jsx `

Hello

Is it me you're looking for?

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"render(() => jsx`<${ParentComponent} />`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`When using \\`\\`state\\`\\` with class components the \\`\\`state\\`\\` is one object.\n\n#### Example\n\\`\\`\\`\n constructor(props) {\n super(props);\n this.state = {\n posts: [],\n comments: [] \n };\n }\n\\`\\`\\`\n\nWhen you update state using the class based component's \\`\\`setState\\`\\` method then the update is merged into the existing value. Setting state using \\'\\'useState\\'\\' replaces the value entirely. This encourages breaking the state up into **multiple \\`\\`useState\\`\\` calls**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md `> #### Exercise\n> \n> Rewrite the following class based component into a function component using the \\`\\`useState\\`\\` hook\n> \\`\\`\\`\n> class NameDisplayer extends React.Component {\n> constructor(props) {\n> super(props);\n> this.state = {\n> name: \"world\",\n> date: new Date()\n> };\n> }\n> \n> render() {\n> return (\n>

\n>

Hello, {this.state.name}

\n>

It is {this.state.date.toLocaleTimeString()}.

\n> this.setState({ name: event.target.value })} type=\"text\" />\n>

\n> );\n> }\n> }\n> \\`\\`\\`\n> \n> Heres the skeleton to get you started\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"function NameDisplayer() {\n return jsx`

Hello, World

It is some time.

\n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"render(() => jsx`<${NameDisplayer} />`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md `##### Ignore the following (used to import react into this workbook)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import {\n render,\n component,\n jsx,\n memo,\n forwardRef,\n React,\n ReactDOM,\n createElement,\n Children,\n createRef,\n createContext,\n lazy,\n Fragment,\n StrictMode,\n Suspense,\n cloneElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useReducer,\n useRef,\n useState,\n useDebugValue,\n createPortal,\n __SECRET_SWITCHER\n} from '@j-f1/react'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null