Question: Below is the code I am having trouble with, the goal is to add a room to the beginning of the list.

```
 render(){
         return(
            <>
 this.state.Rooms.map((room,i)=>
                        <li key={i}>
                        <p> {room.length}  {room.width}</p>
                        <Room  length={room.length} width ={room.width}/>
                        </li>
                    )
</>
}

```

The output of displaying 3 rooms like this is as follows

```
37 1

This is a room, it has a length of 35 and a width of 1

36 1

This is a room, it has a length of 35 and a width of 1

35 1

This is a room, it has a length of 35 and a width of 1

```

It should be

```
37 1

This is a room, it has a length of 37 and a width of 1

36 1

This is a room, it has a length of 36 and a width of 1

35 1

This is a room, it has a length of 35 and a width of 1

```

The array is populated using the code

```
        let newRooms = [];
        newRooms.push({length:this.state.StreetNumber,width:1});      
        this.state.Rooms.forEach((room)=>
          newRooms.push(room)
        ) 

        this.setState((state)=>({
                        Rooms: newRooms
        }));

```

Why is this happening?

Answer: 
Don't put *components* into state, it can result in confusing behavior and convoluted code, like what you're encountering here. Instead, put primitives, objects, and arrays into state, and then in the render method, transform that into the required JSX.

Here, it looks like the best approach would be to have an array of objects, where each object has a `StreetNumber` property and a `width` property.

```
this.setState({
  rooms: [
    { StreetNumber: 35, width: 1 },
    { StreetNumber: 36, width: 1 },
    { StreetNumber: 37, width: 1 },
  ]
});

```

And then you can render it:

```
render() {
  return (
    <div>
      { this.state.rooms.map(({ StreetNumber, width }) => (
          <Room {...{ StreetNumber, width }} />
      )}
    </div>
  );
};

```

Or something along those lines.

To add a room to the state and to what's rendered, just do something like

```
this.setState({
  rooms: [...this.state.rooms, { StreetNumber: 38, width: 1 }]
});

```

Live demo:

```js
const Room = ({ StreetNumber }) => <div>{StreetNumber}</div>

class App extends React.Component {
    state = { rooms: [] }
    render() {
        return (<div>
            {this.state.rooms.map(({ StreetNumber, width }) => (
                <Room {...{ StreetNumber, width }} />
            ))}
            <button onClick={() => this.setState({
                rooms: [...this.state.rooms, { StreetNumber: 38, width: 1 }]
            })}>add room</button>
        </div>);
  }
}

ReactDOM.render(<App />, document.querySelector('.react'));
```

```html
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>
```
The following code has to be added to the Room component

```
    componentWillReceiveProps(props) {
        this.setState({ length : props.length , width : props.width });  
      }

```