How to command re-render after adding element to firebase?

Question

React

Hello everyone
When loading, I get all the posts in componentDidMount(), but when a new element is added, the list is updated only when the page is reloaded.
The code:

addMessage = e => {
    e.preventDefault();
    let data = {
      component: this.state.component,
      component_name: this.state.component_name,
    };
    this.props.addComponent(data);
  };

export const addComponent = data => async dispatch => {
  let comps = await fire.database().ref('components');
  comps.push({
    name : data.component,
    comp: data.component_name,
  });
};

The only option I found is to remove e.preventDefault(), but I don't really like it.

Answer 1

so you, in theory, have a working subscription, you added data and in the on () event they have already been updated

Answer 2

You need to subscribe to events from Firebase ( API documentation - maybe here, maybe somewhere else in the doc, there should be something related to "messages from the base", most likely here ).
Further, when you receive an event in the style: new_element_added to_database, you must call an action that will update your data in your store. Thus, if everything is prepared correctly here, then new props will come to your component and it will be redrawn.
That is, the life cycle methods of the components will not be needed at all here (unless, componentWillReceiveProps in the future, but for now it can definitely be done without it).