title: How to set a variable to a context supplied value (React)
body: <p>I am trying to set a variable to a array value in the context of my react app.  The approach I am using worked perfectly when I used it in a function but I am refactoring to export that function as a class component and now am returning an object that isn't even in my state.  Any thoughts?</p>
  
  <p>The variable I am trying to set in 'FilterNotes.js' component:</p>
  
  <pre><code>const notes = [&lt;MyContext.Consumer&gt;{context =&gt; context.state.notes}&lt;/MyContext.Consumer&gt;];
  </code></pre>
  
  <p>What the output should be:</p>
  
  <pre><code>[
    {
      "id": "cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1",
      "name": "Dogs",
      "modified": "2019-01-03T00:00:00.000Z",
      "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
      "content": "Laborum possimus aperiam. Culpa eos in. Excepturi commodi corporis. Distinctio quo ipsum aperiam et itaque ut quod ut. Modi corporis soluta et deleniti ut. Voluptatibus corrupti aut quia rerum.\n \rOdio ea cupiditate dicta. Aut quia consequatur reprehenderit est sint est fuga illum ex. Adipisci voluptatibus in enim expedita distinctio sint harum dolorem dolor.\n \rQuia accusantium dicta voluptatum reiciendis. Voluptatem illum iusto animi voluptatem fugiat adipisci dolore quia. Sunt fuga autem et qui quo. Consequatur perferendis omnis quisquam repellat voluptas vero deserunt."
    },
  ...
  ]
  </code></pre>
  
  <p>What I am getting as an output:</p>
  
  <pre><code>$$typeof: Symbol(react.element)
  key: null
  props: {children: ƒ}
  ref: null
  type: {$$typeof: Symbol(react.context), _context: {…}, _calculateChangedBits: null, …}
  _owner: FiberNode {tag: 1, key: null, elementType: ƒ, type: ƒ, stateNode: FilterNotes, …}
  _store: {validated: false}
  _self: FilterNotes {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
  _source: {fileName: "/Users/ryancarville/Desktop/FED_Projects/noteful/src/FilterNotes/FilterNotes.js", lineNumber: 8}
  __proto__: Object
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>export default class FilterNotes extends Component {
      render() {
          const notes = [&lt;MyContext.Consumer&gt;{context =&gt; context.state.notes}&lt;/MyContext.Consumer&gt;];
  
          console.log(notes);
          const folderId = this.props.folderId;
          console.log(folderId);
          const notesFiltered = notes.filter(note =&gt; note.folderId === { folderId });
  
          console.log(notesFiltered);
          return notesFiltered.map((n, i) =&gt; {
              return (
                  &lt;MyContext.Consumer&gt;
                      {context =&gt; (
                          &lt;div key={i}&gt;
                              &lt;li key={n.id}&gt;
                                  &lt;Link to={`/notes/${n.id}`}&gt;{n.name}&lt;/Link&gt;
                                  &lt;br /&gt;
                                  &lt;br /&gt;
                                  Date Modified: {n.modified}
                              &lt;/li&gt;
  
                              &lt;button
                                  type='button'
                                  className='deleteNoteBTN'
                                  onClick={() =&gt; context.state.deleteNote(`${n.id}`)}&gt;
                                  Delete Note
                              &lt;/button&gt;
                          &lt;/div&gt;
                      )}
                  &lt;/MyContext.Consumer&gt;
              );
          });
      }
  }
  </code></pre>