Pass and show data from component A to component B

Hello everyone,
Currently I’m working on a personal project using React.js and I’m trying to figure out how to show the state data from the component ‘A’ to component ‘B’, instead of rendering it in the ‘A’ (without any third-party libraries).

For example, here is my A.js component:

import React, { Component } from 'react'
import B from './B';

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

        this.state = {
            activity : "Baseball"
        }
    }

    render() {
        return (
            <div>
              <B activity={this.state.activity}/>  
            </div>
        )
    }
}

export default A;

And this is my B.js component:

import React, { Component } from 'react'

class B extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <div>
               <p>Component B with a {this.props.activity} activity</p> 
            </div>
        )
    }
}

export default B;

When I render <A /> in the Main.js, for example, the results are:

"Component B with a Baseball activity"

So, whatever changes are made in the state data in component A, I would like to render it in component B. Not the opposite.

Put the data + the functions to update them in the parent component, pass them to the children that need them

The React docs have an example