Within my functional component, I have a scenario where it returns another function:
function Lobby() {
const user_context = useContext(UserContext)
return (
<div>{renderData(user_context.state.data)}</div>
)
}
export default Lobby;
The problem arises when there is a change in the user_context, the Lobby() function does not update, causing renderData() to remain stagnant. How can I ensure these functions are called upon a change in the user_context?
(UPDATE) Here are more specifics:
<App />
<UserContext />
<Lobby />
<Introduction />
<Chapter_1 />
<Chapter_2 />
<Chapter_3 />
The UserContext includes a method called finishChapter, which is invoked by a user click within the Introduction. This triggers an update of the chapter in the state of the context and passes the new chapter to the Lobby.
UserContext.js
import React, { createContext, Component } from 'react';
import axios from 'axios';
export const UserContext = createContext();
class UserContextProvider extends Component {
constructor(props){
super(props)
this.state = {
}
};
toggleLoading = () => {
this.setState({loading: !this.state.loading})
setTimeout(() => {this.setState({loading: !this.state.loading})}, 1000)
}
finishChapter = (chapter) => {
axios.put(`/narrative/finish_chapter/${chapter}`).then((done)=> {
this.toggleLoading()
this.getChapter()
})
}
getChapter = () => {
axios.get('/narrative/get_narrative').then(result => {
this.setState({
chapters_complete: result.data[0].chapters_complete,
number_ch_complete: result.data[0].chapters_complete.length
})
})
}
render() {
return (
<UserContext.Provider value={{state: this.state, toggleLoading: this.toggleLoading, finishChapter: this.finishChapter }}>
{this.props.children}
</UserContext.Provider>
)
}
}
export default UserContextProvider;
Once the new chapter is reflected in the context, I intend for Lobby to close Introduction and open Chapter_1.
Presently, although Lobby receives the updated context (e.g., 'Chapter_1' as seen in Chrome tools), it fails to execute the required function.