(React + Meteor) Edit content in another div?

Question

I currently have this as my "index" for my Meteor app:

import React from 'react';

export const App = React.createClass({
  propTypes: {
    children: React.PropTypes.element.isRequired,
  },
  render() {
     return <div className="app-div">
       **<Foo/>**
       **<Bar/>**
       { this.props.children }
    </div>;
  },
});

I am wondering if I can somehow change content of "Foo", through code in "Bar".

Essentially, "Foo" will have code like this:

export class Foo extends React.Component {
  render() {
    return(
        <div className="test">TEXT TO BE REPLACED</div>
    );
  }
}

Bar, will also have similar code:

export class Bar extends React.Component {
  render() {
    // Code goes here to change that div "test"'s content in Foo^^^^^^
    return(
        <div>...</div>
    );
  }
}

But I need to have some sort of code that changes the "TEXT TO BE REPLACED". Is there a way to do this somehow? Maybe with the react DOM or something? I am kind of brute forcing my way through this, so I may not know basic fundamentals, sorry

Thanks in advance

React content changing goes forward only, like parent to children not otherwise.You should use flux frameworks like redux to achieve that functionality — saiyan, Nov 13 '16 at 13:00
@saiyan So theres no way that I can somehow "look up" in the hierarchy of html tags/elements? Maybe something like parent.parent.parent.getelement('test').text = new text, or something similar in functionality to that? — pizzae, Nov 13 '16 at 13:03
No there is no way.If you are familiar with angular `redux` is kind of similar to `services` or `factories`. — saiyan, Nov 13 '16 at 13:07
You should be able to use a Meteor [Session](https://docs.meteor.com/api/session.html) variable to share state between components. `Session.set('title','foo')` and `Session.get('title')`. Whether or not that's a *desirable* pattern is another issue. — Michel Floyd, Nov 13 '16 at 17:38
You can use the Meteor/Mongo database to do this too. If Bar updates something in the database, and Foo is displaying that item, the helpers will re-run, and React will re-render the view for you. — Mikkel, Nov 13 '16 at 20:31

score 0 · Answer 1 · answered Nov 15 '16 at 08:55

In React+Meteor, communication between two siblings component should be done through their parent.

For your case, I would use a state in App component to store the content of "TEXT TO BE REPLACE", and a function inside App component to update that state content:

import React from 'react';

export const App = React.createClass({
  propTypes: {
    children: React.PropTypes.element.isRequired,
  },
  getInitialState() {
    return {
      fooText: '',
    };
  },
  updateFooText(value) {
    this.setState({
      fooText: value,
    });
  },
  render() {
     return (
       <div className="app-div">
         <Foo text={this.state.fooText} />
         <Bar updateFooText={this.updateFooText} />
         { this.props.children }
      </div>
    );
  },
});

export class Foo extends React.Component {
  render() {
    return (
        <div className="test">{this.props.text}</div>
    );
  }
}

export class Bar extends React.Component {
  onChangeHandler(e) {
    this.props.updateFooText(e.target.value);
  },
  render() {
    // Code goes here to change that div "test"'s content in Foo^^^^^^
    return (
      <div>
        <input type="text" onChange={this.onChangeHandler} />
      </div>
    );
  }
}

(React + Meteor) Edit content in another div?

1 Answers1