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