Issue.js

import React, {Component} from 'react';

class RoomList extends Component {
    constructor(props) {
    super(props);
    this.state = {
        rooms: [],
        display: 'none',
        displayRoom: 'none',
        newRoomName: 'New room',
        currentRoom: '',
		testArr: [],
		msgSntIn: ''
    };

	this.roomsRef = this.props.firebase.database().ref('rooms');
}

componentDidMount() {
	this.roomsRef.on('child_added', snapshot => {
		const room = snapshot.val();
		room.key = snapshot.key;
		this.setState({rooms: this.state.rooms.concat(room)});
	});
}

showPopUp = (e) => {
  this.setState(
    {display: 'block'}
  )
}

hidePopUp = (e) => {
  this.setState(
    {display: 'none'}
  )
  this.setState(
    {newRoomName: 'New room'}
  )
}

showRoom = (room) => {
	this.setState(
		{
			currentRoom: room.name,
			displayRoom: 'block'
		}
	)
}

onSubmitFunc = (e) => {
  e.preventDefault();
  if (this.state.newRoomName === 'New room'){
    alert('Name of New Room cannot be `New room`');
  } else {
    this.roomsRef.push({
      name: this.state.newRoomName
    });
    this.setState(
      {display: 'none'}
    )
  }
}

submitTweet = (e) => {
  e.preventDefault();
  this.state.testArr.push(this.state.content);
  console.log(this.state.testArr);
  
  this.setState(
	{
		testArr: this.state.testArr, 
	}	
  )
}

render() {
		return (
	    
		<div className="App">
			
			<div className='asideBar'><br />
				<h4>
					Bloc Chat <button onClick={this.showPopUp}>New room</button>
				</h4>
				
				{
					this.state.rooms.map((room, indexPos, array ) =>
						<p className='rooms'
							onClick={ () => this.showRoom(room)}
							key={indexPos}>
							{room.name}
						</p>
					)
				}
			</div>
			
			<div className='popUp'
				style={{display: this.state.display}}>
				Create a new room
				<br />
				Enter a room name
				
				<form onSubmit={this.onSubmitFunc}>
					
					<input placeholder='New room'
						value={this.state.newRoomName}
						onChange={e => this.setState({newRoomName: e.target.value})}
					/>
					<br />
					
					<input type='button'
						value='Cancel'
						onClick={this.hidePopUp} 
					/>
					
					<input type='submit'
						value='Create room' 
					/>
					
				</form>
			</div>
			
			<div className='currentRoom' style={{display: this.state.displayRoom}}> 
				{this.state.currentRoom}
				<br /> 
			
				<div className='chatDisplay'>
				{
					this.state.testArr.map((msg, pos, array) =>
						<p className='testArr'
							testArrPos={pos} 
							msgSntInRm={this.state.currentRoom}>
							{msg}
						</p>
				    )
				}
				</div>
			
				<div className='textInput'>
					<form onSubmit={this.submitTweet}>
					
						<input placeholder={'Tweet in ' + this.state.currentRoom} 
							value={this.state.messages} 
							onChange={e => this.setState({content: e.target.value})}
						/>
					
						<input type='submit' value='send' 
					
						/>
					</form>
				</div>
			
			</div>
			
		</div>
		);
	}
}

//above is closing bracket for 'class RoomList extends Component'
export default RoomList;