brentsowers1 · January 26, 2021 02:44
diff --git a/sharedStateHookExample.js b/sharedStateHookExample.js
 import React from 'react';
 import { useCounter, useLoggedInUser } from './sharedState';

 const CounterIncrementer = () => {
  // This looks like useState, but it's shared. So whenever any other component
  // calls setCounter, the counter value here will update. And calling
  // setCounter here will update any other component using it.
  const [counter, setCounter] = useCounter();
  return (
    <div>
      <div>Current value in incrementer component - {counter}</div>
      <div>
        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label,react/button-has-type */}
        Increment - <button onClick={() => setCounter(old => old + 1)} />
      </div>
    </div>
  );
 };

 const CounterDisplay = () => {
  const [counter] = useCounter();
  return <div>Counter value in display component - {counter}</div>;
 };

 const LoggedInUserSetter = () => {
  const setUser = useLoggedInUser()[1];
  return (
    <div>
      Set logged in user name -&nbsp;
      <input type="text" onChange={event => setUser(event.target.value)} />
    </div>
  );
 };

 const LoggedInUserDisplay = () => {
  const [user] = useLoggedInUser();
  return <div>Logged in user value in display component - {user}</div>;
 };

 const SharedStateHookExample = () => {
  return (
    <div>
      Main app container
      <CounterDisplay />
      <CounterDisplay />
      <CounterIncrementer />
      <LoggedInUserDisplay />
      <LoggedInUserDisplay />
      <LoggedInUserSetter />
    </div>
  );
 };

 export default SharedStateHookExample;
	import React from 'react';
	import { useCounter, useLoggedInUser } from './sharedState';

	const CounterIncrementer = () => {
	// This looks like useState, but it's shared. So whenever any other component
	// calls setCounter, the counter value here will update. And calling
	// setCounter here will update any other component using it.
	const [counter, setCounter] = useCounter();
	return (
	<div>
	<div>Current value in incrementer component - {counter}</div>
	<div>
	{/* eslint-disable-next-line jsx-a11y/control-has-associated-label,react/button-has-type */}
	Increment - <button onClick={() => setCounter(old => old + 1)} />
	</div>
	</div>
	);
	};

	const CounterDisplay = () => {
	const [counter] = useCounter();
	return <div>Counter value in display component - {counter}</div>;
	};

	const LoggedInUserSetter = () => {
	const setUser = useLoggedInUser()[1];
	return (
	<div>
	Set logged in user name -
	<input type="text" onChange={event => setUser(event.target.value)} />
	</div>
	);
	};

	const LoggedInUserDisplay = () => {
	const [user] = useLoggedInUser();
	return <div>Logged in user value in display component - {user}</div>;
	};

	const SharedStateHookExample = () => {
	return (
	<div>
	Main app container
	<CounterDisplay />
	<CounterDisplay />
	<CounterIncrementer />
	<LoggedInUserDisplay />
	<LoggedInUserDisplay />
	<LoggedInUserSetter />
	</div>
	);
	};

	export default SharedStateHookExample;