reactjs - variable showing as undefined

Question

Im new to reactjs and trying to populate a form from a value retrieved from firebase.

Here is where the value is fetched.

componentWillMount: function () {

    var projectId = this.props.params.key;
    this.fb = new Firebase(rootUrl + 'items/');
    var projectRef = this.fb.child(projectId);

    var subjectproject = "NA";


    projectRef.child("subject").on("value", function(snapshot) {
        subjectproject = snapshot.val();
    });


},

And here is the form input that i want to populate

<div className="col-lg-6">
           <div class="input-group">
               <label class="control-label required" for="project_project_title">Subject</label>
                     <input defaultValue={subjectproject} value={this.state.subject} placeholder="Subject" onChange={this.handleInputChangeSubject} type="text" className="form-control"/>
            </div>
  </div>

All i ever get is projectSubject is undefined. How do i create a variable that can be used to provide a defaultvalue.

Edit -

 projectRef.child("subject").on("value", function(snapshot) {
        textsubject = (snapshot.val());
        this.setState({subject: textsubject});
    });

Throws FIREBASE WARNING: Exception was thrown by user callback. TypeError: this.setState is not a function

Possible duplicate of What is the scope of variables in JavaScript? — Evan Davis
– Evan Davis, Commented Mar 3, 2016 at 21:07

Dmitriy · Accepted Answer · 2016-03-03 21:36:08Z

2

subjectproject - is declared as local variable in componentWillMount. It is not visible in your render method.

See this: https://facebook.github.io/react/docs/forms.html#default-value

The defaultValue and defaultChecked props are only used during initial render.

Example(from comment):

componentWillMount: function () {
    var self = this;

   // some code

    projectRef.child("subject").on("value", function(snapshot) {
        self.setState({
            subjectproject: snapshot.val()
        });
    });


},

edited Mar 3, 2016 at 21:36

answered Mar 3, 2016 at 20:59

Dmitriy

3,76518 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ChrisM Over a year ago

How would i go about making it usable in the form?

ChrisM Over a year ago

Ok so default value is wrong? How would i go about updating the box after the data is fetched?

Dmitriy Over a year ago

When data is fetched you should use this.setState method to set data to state[propertyName]. And then you can use this.state[propertyName] anywhare in your render method

ChrisM Over a year ago

Ive edited my post. If i try setState from inside the function it throws an error. Whats the correct way of doing it? If i use setState outside with other data it sets it fine.

Dmitriy Over a year ago

I have edited my answer too :) this must point to correct object.

|

Collectives™ on Stack Overflow

reactjs - variable showing as undefined

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related