Обновление состояния одного компонента из другого в ReactJS

updateText() должен быть привязан к компоненту. Я не уверен, чего вы здесь пытаетесь достичь, но updateText() может не работать в Sibling1, если контекст изменится.

Вы можете попробовать привязать updateText() в обоих компонентах (уже связанных в Sibling2).

import React, { Component } from 'react';

export function updateText(text) {
  this.setState({text})
}

export class Sibling1 extends Component {
  constructor() {
    updateText = updateText.bind(this)
  }
  render() {
    return (
      <div>
        <div style = {{ ...style.topLabel, color: secondaryColor }}>I am Sibling 1</div>
        <input style = {style.textBox} type = "text"
               placeholder = "Write text" onChange = {(e) => updateText(e.target.value)} />
      </div>
    )
  }
}

Обычно состояние контролируется в родительском компоненте, если два дочерних компонента должны совместно использовать состояние, а потомкам передается только обработчик.

React как бы заставляет вас использовать односторонний поток данных. Таким образом, вы не можете просто обновить состояние Sibling1 из Sibling2.

Как упоминает Динеш Пандиян в своем примере, у вас обычно есть родительский компонент, который контролирует состояние обоих братьев и сестер. Тогда ваш код будет выглядеть так:

Sibling1.js

import React, { Component } from 'react';
<-- some declare style -->

export class Sibling1 extends Component {
  function updateText(text) {
    // Use updateText function from props.
    // Props are like state but not controlled by the component itself
    // The value is passed to the component from outside
    this.props.updateText(text)
  }

  render() {
    return (
      <div>
        <div style = {{ ...style.topLabel, color: secondaryColor }}>I am Sibling 1</div>
        <input style = {style.textBox} type = "text"
               placeholder = "Write text" 
               onChange = {(e) => this.updateText(e.target.value).bind(this)} />
      </div>
    )
  }
} 

Example.js

import React, { Component } from 'react';
import { Sibling1 } from './Sibling1';    // This is good.
import Sibling1 from './Sibling1'; // This is also possible if you use export default class instead of export class

<-- some declare style, variable -->

class Sibling2 extends Component {
  // Use same function as in Sibling1.
  function updateText(text) {
      this.props.updateText(text)
  }

  render() {
    return (
      <div>
        <div style = {{ ...style.topLabel, color: primaryColor }}>I am Sibling 2</div>
        <div style = {style.label}>{this.props.text}</div> // changed state to props
      </div>
    )
  }
}

class Example3 extends Component {
  constructor(props) {
    super(props);


    this.state = {
      text: "Initial state"
    };
  }

  // Control state from parent component
  function updateText(
    this.setState({ text: text });
  }

  render() {
    return (
      <div>
        <Sibling1 updateText = {this.updateText.bind(this)}/>
        <Sibling2 updateText = {this.updateText.bind(this)} text = {this.state.text} />
      </div>
    )
  }
}

export default Example3;