Cannot read property 'value' of undefined for this.refs.variable.value

Question

I am new to react.

I have a input text like so

<input type="text" class="form-control" placeholder="Number Only"
                                      value={that.state.value}
                                      ref={"qtype3" + item.questionId}
                                    />

now in a method I want to get the value inputted in the textbox,so i wrote following block in the method:

const uniqueNames = Array.from(new Set(this.state.arrrefs));

    if (uniqueNames.length > 0) {
      for (let i = 0; i < uniqueNames.length; i++) {
        var inval = uniqueNames[i];
        var ans = this.refs.inval.value;
        var newans = {
          taskId: this.props.location.state.tskId,
          userId: this.props.location.state.userid,
          questionId: "",
          answer: ans
        };
        this.state.radioObj.push(newans);
      }
    }

here arrrefs is an array in the state with refs of several textboxes. In the variable inval I am getting the first value of the arrrefs. but i am getting the exception in the line var ans = this.refs.inval.value;

TypeError: Cannot read property 'value' of undefined

If I pass a hardcode value in line this.refs.inval.value instead of inval I am getting response.

for example, my uniqueNames = ["qtype3800316", "qtype3800317", "qtype3800318", "qtype3800324"]

so i want this.refs.qtype3800316.value

What am I doing wrong here?

`uniqueNames` is the array containing ref.check updated question — Molly, Mar 08 '19 at 13:17
are you sure that this.refs prints all the available refs ? and check this demo once https://stackblitz.com/edit/react-hg78fj !also refs are accessible after first render and check this too https://stackoverflow.com/a/53955840/4061006 — Jayavel, Mar 08 '19 at 13:31
@Jayavel i checked your stackblitz. now suppose i have a submit button and i want to get the input data in each input field in submit button,how to do that..i want to check the user input and pass it to an api call. — Molly, Mar 08 '19 at 13:47
@Jayavel i printed my uniqueNames in the console and got : `uniqueName : (4) ["qtype3800316", "qtype3800317", "qtype3800318", "qtype3800324"]` . and in . my `submit` method I did this : `uniqueNames.map(ele => console.log(this[ele].value))}` but getting error `Cannot read property 'value' of undefined` :( — Molly, Mar 08 '19 at 14:29
@Jayavel I used `document.getElementById(element).value` instead and its working now.thanks for taking time and helping me out :) — Molly, Mar 11 '19 at 06:29

score 1 · Answer 1 · answered Mar 08 '19 at 12:55

1

Try using the [] operators if you want to access within an array/object by a variable.

this.refs[inval].value

answered Mar 08 '19 at 12:55

ApplePearPerson

4,209
4
21
36

No..`uniqueNames` is my array . and `inval` is an element of uniqueName array.like for eg. uniqueNames is [name1,name2,name3,name4]. So in first iteration i will get inval as name1. and i am trying to get this.refs.name1.value – Molly Mar 08 '19 at 13:02

James Delaney · Answer 2 · 2019-03-08T13:27:01.620

0

Try just with: this.refs.inval

Also you can console.log(this.refs) and check what you have there.

edited Mar 08 '19 at 13:27

answered Mar 08 '19 at 13:21

James Delaney

1,765
1
17
36

its returning undefined – Molly Mar 08 '19 at 13:43
Maybe this post can help you: https://stackoverflow.com/questions/35230020/this-refs-something-returns-undefined – James Delaney Mar 08 '19 at 14:27

Cannot read property 'value' of undefined for this.refs.variable.value

2 Answers2