Trigger a click on a different element when clicking an other div

Question

Right now I have a div that is basically a giant square and inside the div I have another div that is simply text that says \"Upload File\" and a hidden input type = file el

Answer 1

You can use "refs" to refer to nodes inside a component and trigger things on them.

FileBox = React.createClass({
        _handleClick: function(e) {
            var inputField = this.refs.fileField;
            inputField.click()
        },
        render: function() {
            return <div id="test" onClick={this._handleClick}>
                       <input ref="fileField" type="file" name="image1" accept=".jpg,.jpeg,.png" id="img1" />
                       <div id="uploadPhotoButtonText">
                           +Add Photo 1
                       </div>
                   </div>
        }
    })

Read more about refs here: https://facebook.github.io/react/docs/more-about-refs.html