How to load data from a different component after submititng form from another component in ReactJs - node.js

Question

I have an Event Model. in my event, people can indicate if they are attending an event by clicking a button, and when they indicate that they are attending an event by clicking a button, a Modal dialog will pop up to ask them if they also want to bring friends along to the event, if they say Yes, it will ask them to choose how many people they want to bring and they will choose from a drop-down list of numbers and submit. after submitting everything it will plus people that are coming and how many people the person is coming with then show them together.
Note: the modal dialog is from another component that I am requiring inside my Event component.
the problem that I am facing now is that my view only updates the people that are coming but doesn't update the number of the people the person is bringing along unless I refresh the page. this was working when I was using class-based-component but after changing my code to function based component it stopped working.
How do I make the browser to update it automatically without refreshing the page?
This is my Sandbox link https://codesandbox.io/s/compassionate-sanne-pmmx6?file=/event-comments.component.js
please use this URL inside sandbox https://pmmx6.csb.app/events/
Just add events after the URL provided by sandbox in other to load the events data because the link to the event is not showing inside the sandbox (I don't know why)

Answer 1

Maybe you can solve this by using event emitter
Use
EventEmitter.subscribe('refresh', (event)=>this.refresh(event))
to create the event
And when you want to execute it you use
EventEmitter.dispatch('refresh', event)
Step by step to create a eventEmitter:
Create a eventEmitter.js file:
const EventEmitter = {
events: {},
dispatch: function (event, data) {
if (!this.events[event]) return;
this.events[event].forEach(callback => callback(data))
console.log("Dispatched: " + event)
},
subscribe: function (event, callback) {
if (!this.events[event]) this.events[event] = [];
this.events[event].push(callback)
console.log("Subscribed: " + event)
},
unsubscribe: function(event) {
if (this.events[event]) {
delete this.events[event]
}
console.log("Unsubscribed: " + event)
}
};
module.exports = {EventEmitter};
In the component you want to refresh first you import the eventEmitter.js. For example:
import {EventEmitter} from "./tools/eventEmitter";
Then you use subscribe() to create a event:
EventEmitter.subscribe('refresh', (event)=>this.refresh(event))
where refresh is the function will execute when you dispatch the event
Finally, when you want to refresh the component, use .dispatch():
EventEmitter.dispatch('refresh', event)
This will execute the this.refresh() first component funcion
If you want to look https://medium.com/#lolahef/react-event-emitter-9a3bb0c719 is a good event emitter's page

Answer 2

Thanks, Everyone, I have solved the problem by just adding events after my API call. I saw the example on the React Facebook page. This method reloads the data anytime there is a change.
const [events, setEventData] = useState([]);
useEffect(() => {
axios
.get(
"https://cryptic-shelf-72177.herokuapp.com/events/" +
props.match.params.id +
"/eventcomments"
)
.then((response) => {
setEventData(response.data);
})
.catch(function (error) {
console.log(error);
});
}, [events]);