как отобразить дочерние элементы firebase в реакции

Question

Я создаю приложение чата, в котором я установил почти все, кроме каналов.Дело в том, что я также устанавливаю сторону каналов, где я записываю свои входные данные, и снимаю их в базе.но я не могу отобразить их на странице при рендеринге.в моем дереве JSON у меня есть ветка сообщений, и там для каждого идентификатора канала я вижу сообщения, которые я пишу.каждый идентификатор канала находится в разных ветках в элементе сообщений.я думаю, что причина, по которой я не могу отобразить сообщения, заключается в том, что они являются дочерними элементами элемента messages.я не мог найти способ отобразить дочерние элементы компонента.вот мой кодэто последняя часть моего приложения, и я застрял здесь.любая помощь будет высоко ценится.

class ChatRoom extends Component {
constructor(props) {
super(props);
this.state = {
  userName: null,
  message: '',
  messages: [],
};
this.messageRef = 
firebase.database().ref('messages');
}


componentWillReceiveProps(nextProps) {
  this.setState({userName: nextProps.currentUser});
}

handleChange(event) {
this.setState({message: event.target.value});
}



handleSend = () => {
if (this.state.message) {
  var newItem = {
    userName: this.state.userName && 
  this.props.currentUser.displayName,
    message: this.state.message,
    id:this.props.currentUser.uid,

  timeDetail:firebase.database.ServerValue.TIMESTAMP,
    channel_id:this.props.selectedChannel.id
  }

 this.messageRef.child(this.props.selectedChannel.id) .push(newItem)
  .then(() => {
    this.setState({message:''})
  })
  .catch(err => {
    console.log(err)
  })
}
  }


handleKeyPress(event) {
if (event.key !== 'Enter') return;
this.handleSend();
}

listenMessages() {
let messages=[]
this.messageRef.child()
  .on('value',snapshot => {
    snapshot.forEach(snap => {
    })
    this.setState({messages:Object.values(snapshot.val())})
  })
}

displayMessages = messages =>
messages.map((message,i) => (
<Message
  key={i}
  message={message}
  userName={this.props.currentUser}
/>
));

render() {
const {messages} =this.state
return (
  <div className="form">
    <div className="chatroom" style={{height:300, width:'90%'}}>
      {this.displayMessages(messages)}
    </div>
      <input
        className="send-message"
        type="text"
        placeholder="Type message"
        value={this.state.message}
        onChange={this.handleChange.bind(this)}
        onKeyPress={this.handleKeyPress.bind(this)}
      />
    <button onClick={this.handleSend}>Send</button>
  </div>
)};
}

function mapStateToProps(state){
  return{
  currentUser:state.user.currentUser,
  selectedChannel:state.channel.selectedChannel
  }
}


export default connect(mapStateToProps)(ChatRoom);