Как кнопку setState в элементе, который будет менять стейт в элементе уровнем выше?

Question

[Ninja Mate]

Есть вот такое приложение

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/>
        );
    }
}

В данном случае кнопка менает стейт в своем родительском элементе, а хочу сделать <UserFirstForm/> <UserFirstForm /> и прочие, что бы они меняли стейт в родительском. Как должно мыглядеть декларирование параметра, что бы стейт принимал значение 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

[Aves]

Сделать метод в родительском компоненте и передать его в дочерний в props.

Comments

[Ninja Mate]

А как правильно передать ? Метод вот такой с передачей из родительского

class GridView extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            form: <UserHome {...this.props}/>
        };
        this.change = this.change.bind(this)
    }
    
    changeView(){
        this.setState({ form: <NewPatient /> })
    }

...{this.state.form}

А в элементе как правильно задекларировать?onClick={changeView()}

[Aves]

Не думаю, что state подходящее место для компонентов, там лучше сделать простой объект.
changeView должен его менять.
В render
А уже в UserFirstForm в render в элементах onClick={this.props.change}

[Aves]

*В render <UserFirstForm change={this.changeView}/>

[Ninja Mate]

Aves:

class GridView extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            form: <UserHome change={this.changeView}/>
        };
        this.change = this.change.bind(this)
    }


    changeView() {
        this.setState({form: <NewPatient />})
    }

    change(){
        this.setState({ open: !this.state.open })
    }
    render() {
        return (
                            {this.state.form }

и в самом элементе выдает ошибку

TypeError: Cannot read property 'setState' of null

может нужно как то this указать или еще что то?

[Ninja Mate]

Aves: в элементе <Button onClick={this.props.change}

[Aves]

Ninja Mate: React по идее сам всё биндит. Думаю, стоит попробовать компонент из консруктора врендер перенести.

[Ninja Mate]

Aves: Как же тогда задать начальный стейт? У меня первый элемент появляется с кнопками, которые должны потом убраться и другие страницы показать на месте {this.state.form } где они и появились.

[Ninja Mate]

Aves: а вот так даже не работает с родительского элемента кнопка...

class GridView extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
           form: ''//<UserHome {...this.props} change={this.changeView}/>
        };
        //this.change = this.change.bind(this)
        //this.changeView = this.changeView.bind(this)
    }



    render() {

        var changeView= () => this.setState({form: <NewPatient />});

        this.state = {
            form: <UserHome change={changeView}/>
        };

        return (
                            {this.state.form}
<Button onClick={changeView}/>

[Aves]

Я сейчас с телефона, сложно код писать, условно так/

class Form extends Component {
  constructor() {
    this.state = { step: 0 }
  }
  change() { this.setState({ step: 1 }) }
  render() {
    return this.state.step === 0 ? <One change={this.change} /> : <Two />
  }
}

[Ninja Mate]

Aves: если можно подробнее немного, я вам на почту написал с примером кода

Answer 2

[Антон]

Думаю, в данном случае есть смысл использовать router, и для каждого состояния просто менять url

Comments

[Ninja Mate]

Посмотрите если не сложно Как React-router можно передать props перезагрузги родительского component? не пойму как их элемента роут менять