Creating a new room (including inputs and button) and only template shows without the values inside (rcc)

Question

At the button click Create I want to display the room with the content (the new values ​​that holds by the objects in the array - the value I wrote inside the inputs) but fro some reason it's not working and I can't solve it, the problem is that only the template that shows the titles Room and Type are shown without the values inside each of them Thanks to the helpers!

App.js

import React, { Component } from 'react'
import './App.css';
import Addroom from './components/Addroom.js'
import Room from './components/Room.js'
import 'bootstrap/dist/css/bootstrap.css';


export default class App extends Component {

  state={roomsList:[{room:'',type:''}]
}
  
  create=(r,t)=> {
    this.setState({roomsList:[...this.state.roomsList,{room:r,type:t}]})
  } 

  render() {
    return (
      <div>

<h1>My Smart House</h1>


{this.state.roomsList.map((element)=>{
         return <Room r={element.room} t={element.type} />

        

       })}

      <Addroom add={this.create}/>
        
      </div>
    )
  }
}

Addroom.js

import React, { Component } from 'react'

export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        
        }

        addRoomName=(e)=> {
            this.setState({room:e.target.value})

        }
        addType=(e)=> {
            this.setState({type:e.target.value})
        }


    createRoom=()=> {
        this.props.add(this.state.room,this.state.type);
    }


    render() {
        return (
            <div>

                <input onChange={this.addRoomName} placeholder='Name Your Room'/><br/>
                <input onChange={this.addType} placeholder='Whats The Room Type?'/><br/>
                <button onClick={this.createRoom}>Create</button>
                
            </div>
        )
    }
}

Room.js

import React, { Component } from 'react'

export default class Room extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             
        }
    }
    
    render() {
        return (
            <div>
                <h1>Room: {this.props.room} </h1>
                <h3>Type: {this.props.type} </h3>
                
            </div>
        )
    }
}

Answer 1

I solved the error, it was a syntax mistake, so what i did, I just asked to get the inside value from my objects in the Room.js components, So it looked like that before:

render() {
        return (
            <div>
                <h1>Room: {this.props.room} </h1>
                <h3>Color: {this.props.type} </h3>
                
            </div>
        )
    }
}

and now I just fixed the syntax to make App.js component understand that I want to display the values inside the objects when I'm creating a new room with my button, because now r and t are represent the values of the variables..

render() {
        return (
            <div>
                <h1>Room: {this.props.r} </h1>
                <h3>Color: {this.props.t} </h3>
                
            </div>
        )
    }
}

This is a very small mistake that is easy to understand, so it is always important to go through your code slowly and safely! Hope it will help some f.e devs in the future..