How to call a React Context function with an argument

Question

so I'm trying to do something pretty simple, which is to consume the function from a Context Component ( which is in a separate file ).

In a nushell, from the App component, render a TaskList, and wrap it within a Provider.

And of course, within the TaskList Component, make use of the Consumer, so I can use its onNewTask to update the Context ( Provider's ) own state.

For, first the App component

import React, { Component } from "react";
import TaskList from "./Components/tasklist";
import Grid from "@material-ui/core/Grid";
import { TaskStore } from "./contexts/TasksStore";

class App extends Component {
  render() {
    return (
      <div>
        <Grid item xs zeroMinWidth>
          <TaskStore>
            <TaskList />
          </TaskStore>
        </Grid>
      </div>
    );
  }
}

export default App;

and then the TaskList component

import React, { Component } from "react";
import TaskContext from "../contexts/TasksStore";
import Task from "./task";

class TaskList extends Component {
  state = {
    newTask: ""
  };
  renderTasks(tasks) {
    return tasks.map(task => (
      <tr>
        <Task task={task} />
      </tr>
    ));
  }
  onTextChange = el => {
    this.setState({ newTask: el.target.value });
    //console.log(el.target.value);
  };
  render() {
    return (
      <TaskContext.Consumer>
        {({ tasks, onNewTask }) => (
          <div>
            <input type="text" value={this.state.newTask} onChange={this.onTextChange} />

            <button onClick={onNewTask}>Add Task</button>

            <table className="tasklist_container">
              <tbody>{this.renderTasks(tasks)}</tbody>
            </table>
          </div>
        )}
      </TaskContext.Consumer>
    );
  }
}

export default TaskList;

To be specific, with onClick={onNewTask} I'm stuck on how to pass the TaskList state value to onNewTask . I can't do it here in this onClick

Heres the Provider Component I set up for the TaskList ( I call the Component a "store", in the spirit of replacing Redux )

import React from "react";

const Context = React.createContext();

export class TaskStore extends React.Component {
  state = { tasks: ["task1", "task2", "task3", "task4"] };

  onTaskSet = (tasks = []) => {
    this.setState({ tasks: tasks });
  };

  onAddTask = task => {
    const newState = [...this.state.tasks, task];
    this.onTaskSet(newState);
    console.log(newState);
  };

  render() {
    return (
      <Context.Provider value={{ ...this.state, onTaskSet: this.onTaskSet, onNewTask: this.onAddTask }}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export default Context;

Answer 1

Here is how you can pass the task argument:

<button onClick={() => onNewTask(this.state.newTask)}>Add Task</button>

How to update React Context from inside a child component?

Also note: https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b You should rewrite your onNewTask

onAddTask = (task) => {
   const setNewState = (oldState) => {
     return {
       tasks: [...oldState.tasks, task]
     }
   }
   this.setState(setNewState);
   console.log(this.state.tasks)
 }