Like a setState button on an element that will change the state of the element one level up?

Question

JavaScript

There is such an application

import { UserFirstForm } from './UserFirstForm'; Здесь декларировать передачу стейта?
import { UserHome } from './UserHome'; 
import....

class GridView extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            form: <UserFirstForm/> или Здесь декларировать передачу стейта?
        };
    }
    render() {
        return (
            <div>
                     {this.state.form}
                     <Button  onClick={() => this.setState({ form: <NewPatient/> })} ></Button>
            </div>
        );
    }
}

export class App extends Component {
    render() {
        return (
            <GridView/>
        );
    }
}

In this case, the button changes the state in its parent element, but I want to do <UserFirstForm/> <UserFirstForm />others, so that they change the state in the parent. How should the declaration of a parameter look like so that the state takes the value children?

export class UserHome extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
             Как задекларировать стейт? :  что то принимает за значение....
        };
    }

    render() {
        return (
            <div>
                <ButtonGroup justified>
                    <Button onClick={????} >Patient<br/>Service</Button>
                    <Button onClick={????} >Non-patient<br/>Service</Button>
                    <Button onClick={????} >Engagement</Button>
                </ButtonGroup>
            </div>
        );
    }
}

Answer 1

Make a method in the parent component and pass it to the child in props.

Answer 2

I think in this case it makes sense to use a router, and just change the url for each state