چرا setState انجام نمیشه و مقادیر state تغییر نمیکنه

این کدهای مربوط به index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import * as serviceWorker from './serviceWorker';

class Sho extends React.Component{
    state={
        user:[
            {name:'mohamamd',family:'barzegar'},
            {name:'fazel',family:'mohammady'},
            {name:'ehsan',family:'barzegar'}
        ]
    }

    doIt(){
        this.setState({
            user:[
                {name:'navid',family:'amary'},
                {name:'yasin',family:'nahidi'},
                {name:'esmaeil',family:'heydari'}
            ] 
        });
    }

    render(){
        return(
            <div>
                <button onClick={this.doIt}>button</button>
                <App name={this.state.user[۰].name} family={this.state.user[۰].family} >i live in sari</App>
                <App name={this.state.user[۱].name} family={this.state.user[۱].family} >i live in amol</App>
                <App name={this.state.user[۲].name} family={this.state.user[۲].family}>i live in sari</App>
            </div>
        )
    }
}

ReactDOM.render(<Sho />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

و این کامپوننت state full که در فایل بالایی از این استفاده شده .. من موندم عیبش چیه که خطا میده و جوابی نمیشه گرفت بعد از اینکه کلیک میکنم!

import React,{Component} from 'react';

class App extends Component{

    render(){
        return(
            <div>
                hello my name is {this.props.name} {this.props.family} , and {this.props.children}
            </div>
        );
    }
}

export default App;

و اینم اسکرین شاتی که از ارور گرفتم :

http://uupload.ir/files/wrmb_reactjs-error-۱.jpg