Class based app here.

MainComponent.js

export class MainComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            nr: 0
        }
    }

    btnClicked(e, nr, name){
        this.setState({name: name});
        this.setState({nr: nr});
    }

    render() {
        return (
            <div>
                <div>
                    <button className="btn btn-success" onClick={e => this.btnClicked(e, '1', 'one')}>UNO</button>
                    <button className="btn btn-success" onClick={e => this.btnClicked(e, '2', 'two')}>DUE</button>
                    <button className="btn btn-success" onClick={e => this.btnClicked(e, '1', 'three')}>TRE</button>
                </div>
                <div>
                    {this.state.nr === '1' && <Child1 name={this.state.name}/>}
                    {this.state.nr === '2' && <Child2 name={this.state.name}/>}
                </div>
            </div>
        )
    }
}
export default MainComponent;

And then here are the 2 child-components:

Child1.js
export class Child1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: props.name,
        }
    }

    render() {
        return (
            <div>
                <div>
                    {
                        this.state.name !== '' &&
                        <h3>{this.state.name}</h3>
                    }
                </div>
            </div>
        )
    }
}

export default Child1;


Child2.js
export class Child2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: props.name,
        }
    }

    render() {
        return (
            <div>
                <div>
                    {
                        this.state.name !== '' &&
                        <h3>{this.state.name}</h3>
                    }
                </div>
            </div>
        )
    }
}

export default Child2;

When I click to the button "One" I see the text "One". But when clicking on button "Three" I still see the same text "One". I have tried adding forceUpdate but it didnt help:

btnClicked(e, nr, name){
    this.forceUpdate(function(){
        this.setState({name: name});
        this.setState({nr: nr});
    });
}

How can I instruct the app to rerender the child component at each click?

CodePudding user response：

In this case you should not assign the Child components prop value to state. Just use the prop value in the component.

export class Child1 extends Component {
    render() {
        return (
            <div>
                <div>
                    {
                        this.props.name !== '' &&
                        <h3>{this.props.name}</h3>
                    }
                </div>
            </div>
        )
    }
}

export default Child1;

The Child component's constructor will not be called each time the props update. So, state will not be updated when the props are updated.

In this case - as in most cases - you do not need forceUpdate.