Another approach (different than the general passing props answer) you can use the Provider Pattern to share state to nested child components.

Provider Pattern

The Provider Pattern solves the problem of prop drilling. It uses React's Context API and the compound components pattern. The Provider pattern allows sharing state anywhere in the tree without drilling props to child components by exposing the React's Context.Consumer to child components.

Compound Components

Think of compound components like the <select> and <option> elements in HTML; the parent component acts as a wrapper to all child components where the parent component (provider component) manages shared state while the child components (consumer components) can access and update the shared state.

Context API

The Context API has 3 key parts:

• React.createContext: Creates a Context object.
• Context.Provider: Every Context object comes with a Provider Component that allows consuming components (child components) to subscribe to context changes. It accepts a value prop to be passed to consuming components that are descendants of this Provider.
• Context.Consumer: A React component that subscribes to context changes. This lets you subscribe to a context within a functional component.

Parent Component

const ToggleContext = React.createContext({
  on: false,
  toggle: () => {},
  reset: () => {},
  getTogglerProps: () => {}
});

class Toggle extends React.Component {
  // Consumer, a static property
  // We are not exposing the entire ToggleContext object to the user
  // and we can use the component consumer directly off the Toggle Component
  static Consumer = ToggleContext.Consumer;

//....

render() {
    // Now we'll be exposing the state and helpers via React's context API.
    const { children } = this.props;
    // Using both the provider pattern and render props pattern
    const ui = typeof children === "function" ? children(this.state) : children;
    return (
      <ToggleContext.Provider value={this.state}>{ui}</ToggleContext.Provider>
    );
  }
}

Child Components

function NavSwitch() {
  return (
    <div className="nav-switch">
      <Toggle.Consumer>
        {toggle => (
          <Switch
            {...toggle.getTogglerProps({
              on: toggle.on
            })}
          />
        )}
      </Toggle.Consumer>
    </div>
  );
}

function Text() {
  return (
    <Toggle.Consumer>
      {toggle => (toggle.on ? "️️On" : "Off")}
    </Toggle.Consumer>
  );
}

App Component

function App() {
  return (
    <div className="App">
      <Toggle>
        <div>
          <Header />
          <Text />
        </div>
      </Toggle>
    </div>
  );
}

Using Props you can communicate between two component. When calling a component with in a component you can pass some props like: <Welcome name="David" />, And with in the Welcome component you will be able to access it via props.name

Thanks for inviting me but I do follow react but just having had a chance to dabble with it more x

How to communicate between two components in reactjs in general ?

The Common way of doing this would be passing props to the parent. Both for stateful and stateless you would follow similar pattern. Only when you app gets really big you would require additional external state managers like Redux or Flux.

I have showed Some Example Below From React Documentation Website.

For a Stateful Component

According to the React Docs, the Stateful Component is Defined Below,

class Welcome extends React.Component {
    constructor(props){
        super(props);
        this.state={
            didGreetUser: true
        }
    }
render() {
    return <h1>Hello, {this.props.name} : {this.state.didGreetUser}</h1>;
  }
}

Greet The User Using The Component by Passing Props

class Greet extends React.Component {
  render() {
    return <Welcome name="David" />;
  }
}

The Output of the Above Would be Hello, David : true

For a Stateless Component

Here You don't have states so, here you need to convert to a prop.

let Welcome = (props) =>  {
  return <h1>Hello, {props.name} : {props.didGreetUser}</h1>;
}

let App = (props) => {
return <Welcome name="Sara" didGreetUser={true} />
}

The Output of the Above Would be Hello, Sara : true

For Further Reading Go through, This Link

I hope this helps whoever is looking for answers.

Using props. From parent to child, props. From child to parent, callback Props. Here is an example on what I am working now.

<SortableHead
  label={employeeAttribute}
  columnName="label"
  sortCriteria={sortCriteria}
  onSort={handleSort}
/>

onSort is the callback prop how child communicates with the parent.