Why does nothing come out when trying to display items from Firebase?

Question

React

Hello everyone
I can not display items from the firebase. In AC - outputs, in reducer - outputs, but not in the component.
The code :

componentDidMount() {
    const ideas = firebase.database().ref("items");
    let arr = [];
    ideas.on("value", snapshot => {
      let items = snapshot.val();
      for (let item in items) {
        arr.push({
          id: item,
          text: items[item].text
        });
      }
    });
    this.props.renderIdeas(arr);
  }

AC :

export function renderIdeas(ideas) {
  return {
    type: RENDER_IDEAS,
    payload: ideas
  };
}

Reducer :

export default function(state = [], action) {
  switch (action.type) {
    case RENDER_IDEAS:
      return action.payload;
    default:
      return state;
  }
}

UPD:
It turns out that everything is in order, but I can't even output the data with console.log.
Here is my code:

render() {
    var Items = this.props.ideas;
    console.log(Items); //это выводит в порядке
    for (var key in Items) {
      console.log(key); //это уже не работает
    }
}

The output looks like this:

Answer 1

The code in componentDidUpdate is not correct, you can fix it like this:

componentDidMount() {
    const ideas = firebase.database().ref("items");
    let arr = [];
    ideas.on("value", snapshot => {
      let items = snapshot.val();
      for (let item in items) {
        arr.push({
          id: item,
          text: items[item].text
        });
      }
      this.props.renderIdeas(arr);
    });
  
  }

The reason is asynchrony . He rendered your component before the completion of the on value callback . Since you passed a link to the array, it was displayed and updated in the console, but the render passed with an empty one.
Iterating arrays for in is not recommended, the order of elements may be violated. For objects it is also better to use Object.keys(obj).map
reducer for render should not be used.