0

How do I access in React, a method of one component in other components, that are not in a direct parent-child relation? For example:

    var QuestionsBox = React.createClass({
         **editQuestion**: function(questionId){               
            // do something  
            // this.refs.mainForm.loadQuestionFromServer.bind(this, questionId);
        },
        getInitialState: function() {
            return {data: []};
        },
        render: function() {
            return (
              <div className="questionsBox">
                <h4>Questions</h4>
                <QuestionsList data={this.state.data}/>
              </div>
            );
          }    
    });

    var QuestionsList = React.createClass({
      render: function() {

          var reactObject = this;

          var questionsList = this.props.data.map(function (question) {
            return (
              <Question id={question.id}>
                {question.question_name}
              </Question>
            );
          });

        return (
          <div>
            {questionsList}
          </div>
        );
      }
    });

var Question = React.createClass({
    render: function() {
        return(
            <div className="question">
                {this.props.children}
                <a   onClick={**access here editQuestion method of QuestionsBox component, with parameters**}>edit</a>
            </div>
        );
    }
});

or other similar structures, that do not have a direct parent-child relation..

2 Answers 2

1

You need to pass it down as a prop

   var QuestionsBox = React.createClass({
         **editQuestion**: function(questionId){               
            // do something  
            // this.refs.mainForm.loadQuestionFromServer.bind(this, questionId);
        },
        getInitialState: function() {
            return {data: []};
        },
        render: function() {
            return (
              <div className="questionsBox">
                <h4>Questions</h4>
                <QuestionsList 
                  data={this.state.data}
                  editQuestion={this.editQuestion}
                />
              </div>
            );
          }    
    });

    var QuestionsList = React.createClass({
      render: function() {

          var reactObject = this;

          var questionsList = this.props.data.map(function (question) {
            return (
              <Question>
                id={question.id} 
                editQuestion={this.props.editQuestion} 
                {question.question_name}
              </Question>
            );
          });

        return (
          <div>
            {questionsList}
          </div>
        );
      }
    });

var Question = React.createClass({
    render: function() {
        return(
            <div className="question">
                {this.props.children}
                <a id={this.props.id} onClick={this.editQuestion}>edit</a>
            </div>
        );
    },
    editQuestion: function(e) {
       this.props.editQuestion(e.target.id);
    }
});
Sign up to request clarification or add additional context in comments.

1 Comment

I thought that there might be another way.. What if for example I have 10 levels of children passing it all the way down would be a pain... But yes, right now, this is the way I have implemented it.
0

Create a separate storage class. Embed the instance of that class in each place that has access to editing the data it contains. You see this in Flux, Facebook's architecture library. Instead of passing down handlers, have the events be emitted from the Storage class, and have each component subscribe to that instance of the storage class.

It's hard to describe, but that link has a video which will make it very clear. This way, any time data changes the store will trigger events which will trigger re-renders of your react views.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.