React Recipe Box challenge

React Recipe Box challenge
0

#1

My pen is here: http://codepen.io/stefaleon/pen/WxOKKk .
My current problem is that I cannot access the FormControl input elements inside the modal in order to edit them.
I have added some testing elements below the add button, which can be accessed (lines 92-94) via document.getElementById, but when the ids are inside the modal, I am receiving “inside open(), document.getElementById(‘nameFormControlId’) is:null”…
Thanks in advance for your advise.


#2

I’m not sure why this doesn’t work, but React has a way around it called the refs attribute. It’s a function that’s invoked immediately after the component is mounted and is passed that element as an argument. This way you can set references to it without relying on DOM traversal:

render: function() {
  return (<input type="text" refs=(function(input) {
    this._myTextInput = input;
  })
}

//...

componentWillUpdate: function() {
  //you can reference this._myTextInput here
}

#3

Thank you for the input Stick!
Still cannot figure out how to squeeze refs in this code, got some more reading to do erstwhile…
I want to try and keep it as clean as possible, I 'll try to figure out first why the inside-modal-ids are not visible, I just hope it is a mistake someplace in my code and not some react-bootstrap bug…
I 'll code a simplified version for testing and post it here if it doesn’t reveal a solution right away.
Anyway, React is a tough horse to me, seems it will take much more time than I expected to get a handle on it.


#4

Here is the simplified version for testing purposes, just in case anyone notices some thing that I don’t.

I have stripped out all code that does not interfere with the issue.
Added console.log messages throughout the processes.

The external to the modal FormControl test inputs remain and operate as intended:

In component ‘Add’, method ‘open’, we are testing if tempName has been properly received via
document.getElementById(‘each_id’).innerHTML = tempName;

So, when we pick an entry, for instance “Foo”, click it and then click on Edit…

For the external to the modal FormControl test inputs, there is no problem and we are logging:
document.getElementById(‘tst1’) is:[object HTMLParagraphElement]
document.getElementById(‘tst2’) is:[object HTMLDivElement]
document.getElementById(‘tst3’) is:[object HTMLDivElement]
document.getElementById(‘tstfc3’) is:[object HTMLInputElement]

The issue is with the inside-the-modal ids, where we log:
component ‘Add’, method ‘open’, document.getElementById(‘modalTitle’) is:null
component ‘Add’, method ‘open’, document.getElementById(‘nameFormGroupId’) is:null
component ‘Add’, method ‘open’, document.getElementById(‘nameFormControlId’) is:null