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>
        )
    }
}

what kind of global variables are undefined? where is the error? — Mihályi Zoltán, Jul 21 '20 at 14:33
Those variables (`kitchen`,`bathroom`...) are **not** global variables. [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object, for example, is a global variable. — Dennis Vash, Jul 21 '20 at 14:36
https://stackoverflow.com/questions/5786851/define-global-variable-in-a-javascript-function, and you should read about scopes https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript — Dennis Vash, Jul 21 '20 at 14:51
You're probably right, I'll deepen and slowly learn, I should have been careful and used that term... thank you!! — HardBeard, Jul 21 '20 at 17:00

score 2 · Answer 1 · answered Jul 21 '20 at 14:54

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;

You are right, I get parts of what you meant, the answer to my question is also relevant for what you have written, thank you very much! — HardBeard, Jul 21 '20 at 17:04

score 1 · Answer 2 · answered Jul 21 '20 at 14:50

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.

I used the method and understood what you did with the `Type` and `roomSelected` for the value entered when the user select in the dropdown. Thank you! — HardBeard, Jul 21 '20 at 16:59

score 0 · Accepted Answer · answered Jul 21 '20 at 16:56

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>
        )
    }

}

undefined my variables in react class component

3 Answers3