Using a react context callback with a parameter

I have been trying to get it to work for weeks. I have googled over dozens of sites, but all examples are either too easy and simple, or else the callback function in the context state does not have a parameter or it does but it’s too complex.

Here is what works:

  const ReactContext = React.createContext();
  
  class MessageQueue extends React.Component 
  {
    constructor(props) 
    {
      super(props);
      this.state = { message: 'Click a button to view an article' };
    }
    render()
    {
      return(
        <ReactContext.Provider value=
          {{
            state: this.state,
            updateMessage: () => this.setState({ message: 'ssiigghh...' })
          }}>
          {this.props.children}
        </ReactContext.Provider>
      )
    }
  }

  class Button extends React.Component 
  {
    constructor(props) 
    {
      super(props);
      this.state = { };
    }
    render()
    {
      return(
        <ReactContext.Consumer>
        {
          (context) => 
          (
            <li>
              <button onClick={context.updateMessage} 
                      className="btn_fancy_blue">{this.props.fileName}</button>
            </li>
          )
        }
        </ReactContext.Consumer>
      );
    }
  }
  
  class ButtonBar extends React.Component 
  {
    constructor(props) 
    {
      super(props);
      this.state = { };
    }
    render()
    {
      return(
        <div className="buttonBar">
          <ul>
            <Button fileName="Page1" />
            <Button fileName="Page2" />
            <Button fileName="Page3" />
          </ul>
        </div>
      );
    }
  }

…See how, in the button onclick handler’s context.updateMessage, it doesn’t have a parameter?
Here is what I WANT to do:

  const ReactContext = React.createContext();
  
  class MessageQueue extends React.Component 
  {
    constructor(props) 
    {
      super(props);
      this.state = { message: 'Click a button to view an article' };
    }
    render()
    {
      return(
        <ReactContext.Provider value=
          {{
            state: this.state,
            updateMessage: ({ pageID }) => this.setState({ message: pageID })
          }}>
          {this.props.children}
        </ReactContext.Provider>
      )
    }
  }

  class Button extends React.Component 
  {
    constructor(props) 
    {
      super(props);
      this.state = { };
    }
    render()
    {
      return(
        <ReactContext.Consumer>
        {
          (context) => 
          (
            <li>
              <button onClick={context.updateMessage({this.props.fileName})} 
                      className="btn_fancy_blue">{this.props.fileName}</button>
            </li>
          )
        }
        </ReactContext.Consumer>
      );
    }
  }
  
  class ButtonBar extends React.Component 
  {
    constructor(props) 
    {
      super(props);
      this.state = { };
    }
    render()
    {
      return(
        <div className="buttonBar">
          <ul>
            <Button fileName="Page1" />
            <Button fileName="Page2" />
            <Button fileName="Page3" />
          </ul>
        </div>
      );
    }
  }

But virtually nothing I’ve tried will work and the half dozen examples that came close to what I want to do, the code had errors.

Can somebody come up with a solution to this?

Thanx,
jb

Would need to to run the code to check as I can only see on major issue on first glance: it’s onClick={() => updateMessage(..., the callback argument for an event handler (be it react or browser or node or whatever) takes a function not a value, in your code you are passing it a value.