Display a different components in a click of a button (react component class)

Question

I created two dropdowns selection, input, and a button in my Addroom component and I want to display that component in my main page only in a click of the button - it will look like a page with a single button.

After the user will finish fill the details (at Addroom component) and clicking on the Create button I want to display the titles with the values that the user filled - Room component.

In the current situation, everything is just already on the main page..

• the Addroom component with elements for fill out.
• the Room Component with the titles that filled with the user details.

And this is what I want it to look like:

I hope the explanation is understandable - these are two buttons...

I have tried different methods to display the components separately but none of the methods work properly and just made a lot of mess that I couldn't understand in the code. I tried things like boolean values and tried to create a button based on the specific condition, and also methods that based on the state value that contact operators with functions to update the state values based on the unique identifiers.

Is there a simple way to do this without ruin the algorithms that work? I could really use a hand.. Thank you! and particularly thanks for your patience..

App.js

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

export default class App extends Component {

  state={
    
    roomsList:[{room:''}],
    roomTypeSelection:[{roomType:''}],
    colorTypeSelection:[{colorType:''}],
    isActive: false
}

handleShow = () => {
  this.setState({isActive: true});
};

handleHide = () => {
  this.setState({isActive: false});
};

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

getRoomTypeSelection=(rt)=> {
  this.setState({roomTypeSelection:[...this.state.roomTypeSelection,{roomType:rt}]})
} 

getColorTypeSelection=(ct)=> {
  this.setState({colorTypeSelection:[...this.state.colorTypeSelection,{colorType:ct}]})
} 

  render() {
    
    return (
      <div>
        
        <h1>My Smart House</h1>

{this.state.roomsList.map((element)=>{
         return <Room r={element.room} rt={element.roomType} ct={element.colorType}/>
       })}

      <Addroom add={this.create}  addRoomType={this.getRoomTypeSelection} addColorType={this.getColorTypeSelection}/>

      </div>
    )
  }
}

Addroom.js

import React, { Component } from 'react'


export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        this.state = {
            backgroundColor:'white',
            room:'',
            roomNameInputColor:'white',
            roomTypes:["kitchen", "bathroom", "bedroom"],
            roomSelected: [''],
            roomSel:'',
            colorTypes:['red', 'green', 'blue', 'teal'],
            colorSelected:[''],
            colorSel:'',
    };   
        }

        addRoomName = (e) => {
            const room = e.target.value;
          
            let roomNameInputColor = 'white';
            if (e.target.value.length >= 5) {
              roomNameInputColor = 'green';
            } else {
              roomNameInputColor = 'red';
            }
          
            this.setState({ room, addRoomName: room, roomNameInputColor });
          }


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

    createRoomType=()=> {
        this.props.addRoomType(this.state.roomSelected);
    }

    createColorType=()=> {
        this.props.addColorType(this.state.colorSelected);
    }


    setCategory = (roomSel) => {
        this.setState({roomSelected : roomSel});
    };

    setColorCategory = (colorSel) => {
        this.setState({colorSelected : colorSel});
    };
    
    render() {
        return (
            <div>

            {/* //Select Room Type */}
            <select onChange={(e) => this.setCategory(e.target.value)}>{this.state.roomTypes.map((type) =>
            <option value={type}>{type}</option>
               )}</select><br/>

            {/* //Select Room Color */}
            <select onChange={(e) => this.setColorCategory(e.target.value)}>{this.state.colorTypes.map((type) =>
            <option value={type}>{type}</option>
               )}
      
            </select><br/>

            <input onChange={this.addRoomName} style={{backgroundColor:this.state.roomNameInputColor}} placeholder='Name Your Room'/><br/>
 
            <button onClick={() => {this.createRoom(); this.createRoomType(); this.createColorType();}}>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>
                <h3>Room1: {this.props.r} </h3>
                <h3>Room Type1: {this.props.rt}</h3>
                <h3>Room Color1: {this.props.ct}</h3>
                
            </div>
        )
    }
}

Answer 1

If I understand correctly, you only want to show the Addroom dropdowns and input when the user has clicked the Create button once, after which they can add a room. For that you can use a state to toggle what to display.

Ive made a quick sandbox example, please see if that works.

Note: dont forget to add a key when using map(), like this:

<select>
    {items.map((value, key) => (
       <option key={key} value={value}>{value}</div>
    ))}
</select>

Edit: improved the sandbox code