Chage how value is set on Provider because it is better on performance

Author: ChrisWcs

src/__tests__/react-context.js

@@ -5,44 +5,32 @@ const StateContext = React.createContext()
 
 const MyButton = () => (
   <StateContext.Consumer>
-    {({handleToggle}) => (
-      <button onClick={handleToggle}>
-        Push Me
-      </button>
-    )}
+    {({handleToggle}) => <button onClick={handleToggle}>Push Me</button>}
   </StateContext.Consumer>
 )
 
 const SecretMessage = () => (
   <StateContext.Consumer>
-    {({toggleStatus}) => (
-      <h1>
-        {toggleStatus ? 'Secret Message' : 'Hidden'}
-      </h1>
-    )}
+    {({toggleStatus}) => <h1>{toggleStatus ? 'Secret Message' : 'Hidden'}</h1>}
   </StateContext.Consumer>
 )
 
 class Container extends React.Component {
-  state = {
-    toggleStatus: false,
-  }
-
   handleToggle = () => {
     this.setState(prevState => ({
       toggleStatus: !prevState.toggleStatus,
     }))
   }
 
+  state = {
+    toggleStatus: false,
+    handleToggle: this.handleToggle,
+  }
+
   render() {
     return (
       <div>
-        <StateContext.Provider
-          value={{
-            toggleStatus: this.state.toggleStatus,
-            handleToggle: this.handleToggle,
-          }}
-        >
+        <StateContext.Provider value={this.state}>
           <MyButton />
           <SecretMessage />
         </StateContext.Provider>
@@ -51,9 +39,9 @@ class Container extends React.Component {
   }
 }
 
-test('Component renders with the correct message, correctly changes message after clicking butotn', () => {
+test('Component renders with the correct message then correctly changes message after clicking button', () => {
   const {getByText} = render(<Container />)
-  expect(getByText('Hidden').textContent).toBe('Hidden');
+  expect(getByText('Hidden').textContent).toBe('Hidden')
   Simulate.click(getByText('Push Me'))
-  expect(getByText('Secret Message').textContent).toBe('Secret Message');
+  expect(getByText('Secret Message').textContent).toBe('Secret Message')
 })