React JS Uncaught ReferenceError: locationValue(variable) is not defined

Question

I am trying to pass the value of the ImageTag entered by the user as well as the locationValue selected from the dropdown menu(selectField of material-ui) to the server via socket.

Here is my code:-

var BaseImageDetails = React.createClass({
getInitialState:function(){ 
    return{
        imageTag: '',
        locationValue: ''
    };

},
contextTypes: {
    socket: React.PropTypes.object.isRequired
},

handleImageChange:function(event){
    this.setState({imageTag: event.target.value});
    console.log(imageTag);
},

handleLocationChange:function(event){
    this.setState({locationValue: event.target.value});
    console.log(locationValue);
},


clickedBase: function(e){
    e.preventDefault();
    this.context.socket.emit("baseImageSubmit",{imageTag},{locationValue});


},

render(){
    console.log("wwooowwowow" , this.props.locationDetails);
        var locationItems = this.props.locationDetails.map(function(locationItem){
            return <MenuItem value = {locationItem} primaryText = {locationItem} />
        }.bind(this));      

    console.log("locationItems------------",locationItems);
    return(
        <div>             
            <Card>
                <CardHeader
                  title="Please provide the following details ? "
                  actAsExpander={true}
                  showExpandableButton={true}
                />
               <form onSubmit = {this.clickedBase} >
                    <TextField hintText="Image Tag" 
                    floatingLabelText="Image Tag"
                    value = {this.state.imageTag} onChange = {this.handleImageChange}/>
                    <Divider />
                    <SelectField 
                        fullWidth={true}
                        hintText="Select the location of your base-image Dockerfile"
                        onChange = {this.handleLocationChange}
                        value = {this.state.locationValue}                                                                                     
                        maxHeight={200}>
                        {locationItems}
                    </SelectField>
                    <Divider />
                    <RaisedButton label="Secondary" primary={true}
                     label="Build" secondary={true} 
                     type = "submit" />
                </form>                              
                </Card>
             </div>
        );
    }
});

But while consoling it prints "Uncaught ReferenceError: locationValue is not defined" both for the locationValue and imageTag. Can you guys help me where I am doing wrong....

Seems your line `this.context.socket.emit("baseImageSubmit",{imageTag},{locationValue});` should be changed to `this.context.socket.emit("baseImageSubmit",{imageTag: this.state.imageTag},{locationValue: this.state.locationValue});` — Joy, Sep 20 '16 at 11:46

Ruan Mendes · Accepted Answer · 2016-09-20T13:45:48.123

0

When you write {imageTag}, that's the same as writing {imageTag: imageTag}, and there's no local variable called imageTag on your scope.

You probably mean

this.context.socket.emit("baseImageSubmit",{
    imageTag: this.props.imageTag
},{
    locationValue: this.props.locationValue
});

Or if you are trying to use destructuring assignments

const {imageTag, locationValue} = this.props;
this.context.socket.emit("baseImageSubmit",{imageTag},{locationValue});

edited Sep 20 '16 at 13:45

answered Sep 20 '16 at 11:48

Ruan Mendes

90,375
31
153
217

Yeah i made that mistake it should have been the one as you mentioned above!!Nevertheless..Thanks a lot – Paramveer Singh Sep 20 '16 at 13:24
@ParamveerSingh Nevertheless what? – Ruan Mendes Sep 20 '16 at 13:45
The mistake you pointed out was noted by me,when writing {imageTag} without any local variable called imageTag on that same scope..that is why I was getting this error...ThankYou so much for explaining :) – Paramveer Singh Sep 21 '16 at 04:49
@paramveer you did not note that on your post. You should mark this as the accepted answer, so it's clear to others what the solution is – Ruan Mendes Sep 21 '16 at 10:31

React JS Uncaught ReferenceError: locationValue(variable) is not defined

1 Answers1