Updating and consuming our state

consume-update.js

export default function SomeCount () {
  return (
    <StateConsumer>
      {({ state, setState }) => (
        <>
          <p>
            Count: {state.count}
          </p>
          <button onClick={() => setState({ count: state.count + 1 })}>
            + 1
          </button>
          <button onClick={() => setState({ count: state.count - 1 })}>
            - 1
          </button>
        </>
      )}
    </StateConsumer>
  );
}

Hey @Jahans3, I've read your article and I just found two little mistakes in your gist:

1. Adjacent JSX elements must be wrapped in an enclosing tag, maybe use a fragment or a div;
2. count in the setState is not defined;

So, updating that:

export default function SomeCount() {
  return (
    <StateConsumer>
      {({ state, setState }) => (
+        <React.Fragment>
          <p>Count: {state.count}</p>
-          <button onClick={() => setState({ count: count + 1 })}>+ 1</button>
-          <button onClick={() => setState({ count: count - 1 })}>- 1</button>
+          <button onClick={() => setState({ count: state.count + 1 })}>+ 1</button>
+          <button onClick={() => setState({ count: state.count - 1 })}>- 1</button>
+        </React.Fragment>
      )}
    </StateConsumer>
  )
}

Cheers