Same component with different parameters is not updating in react

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?

>Solution :

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.