title: React - on click div text, change text from another div
body: <p>I'm new to React JS, so I'm sorry in advance for the question.</p>
  
  <p>I am developing a component here (<strong><a href="https://codesandbox.io/s/8pkl8w6xy0" rel="nofollow noreferrer">https://codesandbox.io/s/8pkl8w6xy0</a></strong>) where I have a <code>&lt;div&gt;</code> with text inside. Outside of this <code>&lt;div&gt;</code> there is <strong>another text</strong>.</p>
  
  <p>I'm looking to find a way to <strong>substitute</strong> "Replace me!" with "I wanna replace that guy!", <strong>when I click</strong> on "I wanna replace that guy!".</p>
  
  <p>So far, so good but when I click on "I wanna replace that guy!", the text inside the <code>&lt;div&gt;</code> doesn't change.</p>
  
  <p>The component with <strong>"Replace me!"</strong>:</p>
  
  <pre><code>class TextBox extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      content: 'Replace me!'
    };
    this.changeContent = this.changeContent.bind(this);
  }
  
  changeContent (newContent) {
    //code to change 'Replace me!' with 'I wanna replace that guy!'
    //when I click 'I wanna replace that guy!'
    this.setState({
      content: newContent
    });
  }
  
  render() {
    return (
      &lt;div&gt;
        &lt;div className="content_box"&gt;{this.state.content}&lt;/div&gt;
        &lt;Content onClick={this.changeContent}&gt;&lt;/Content&gt;
      &lt;/div&gt;
    );
  }
  }
  
  ReactDOM.render(
    &lt;TextBox /&gt;, 
    document.getElementById("root")
  );
  </code></pre>
  
  <p>The component with <strong>"I wanna replace that guy!"</strong>:</p>
  
  <pre><code>export class Content extends React.Component {
    constructor(props) {
    super(props);
  
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(e) {
    const content = e.target.value;
    this.props.onClick(content);
  }
  
  render() {
    return (
      &lt;div onClick={this.handleClick} value="heeey" className="text_color"&gt;
        I wanna replace that guy!
      &lt;/div&gt;
    );
  }
  }
  
  export default Content;
  </code></pre>
  
  <p>Thank you for the help.</p>