undefined my variables in react class component

Question

My variables are undefined, none of them, why not? What did I define incorrectly? Do I need to change the whole method or can I fix some things based on what I wrote?

I put here only the relevant component

Thanks!

Addroom.js

import React, { Component } from 'react'

export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        this.state = {

            category,
            setCategory,
            roomTypes:[kitchen, bathroom, bedroom],
            yourRoom
        }}

        getSelectedRoomInCategory = () => {
            return roomTypes.filter(
              (yourRoom) => yourRoom.category === category
            );
          };

  
    render() {
        return (
            <div>
                <h1>Select Room Type!</h1> 

                <select onChange={(e) => setCategory(e.target.value)}>
                <option value={kitchen}>{kitchen}</option>
                <option value={bathroom}>{bathroom}</option>
                <option value={bedroom}>{bedroom}</option>
                </select>
            </div>
        )
    }
}

Answer 1

Looks like:

• you're missing some imports there (kitchen, bathroom, bedroom);
• unnecessarily overriding the constructor to set initial state;
• incorrectly referencing setCategory (either deconstruct this.state or reference it fully as: this.state.setCategory);
• not setting state.setCategory to any valid values (should this even belong in state or should it be passed down from props? if so, don't copy to state);
• not setting state.category to any valid value (as above)
• possibly missing a value binding on the select;

Answer 2

Ciao, there are some errors in your code. Lets try to rewrite component like this:

import React, { Component } from 'react'

export default class Addroom extends Component {

constructor(props) {
    
    super(props)
    this.state = {
        roomTypes:["kitchen", "bathroom", "bedroom"],
        roomSelected: ''
    }}

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


render() {
    return (
        <div>
            <h1>Select Room Type!</h1> 

            <select onChange={(e) => setCategory(e.target.value)}>
               this.state.roomTypes.map(type => {
                  <option value={type}>{type}</option>
               })
      
            </select>
        </div>
    )
}
}

And now you have the room selected in this.state.roomSelected .

Answer 3

Now its works perfect, all the relevant variables are imported and identified. I used a slightly different method, using the one written below with a little bit of changes.

I made a connection between the written function and the call of the function in return and correctly defined the variables in state so now all the relevant variables are imported and identified and everything works. thank you all!

import React, { Component } from 'react'

export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        this.state = {
          
            roomTypes:["kitchen", "bathroom", "bedroom"],
            roomSelected: '',
            roomSel:''
    

        }}

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

    render() {
        return (
            <div>

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

}