Event-Handler-Einstellung-Status von einer untergeordneten Komponente wird nicht übergeordnete Komponente erneut rendern

Ich versuche SetState einer übergeordneten Komponente (App) von einer untergeordneten Komponente (TableOfContents), in diesem Fall eine zustandslose funktionale Komponente, so dass alles meine Tabellen neu rendern und aktualisieren kann. Event-Handler (changeUrl) wird aufgerufen und der Status wird so weit ich weiß geändert, aber es wird kein Rendering durchgeführt, die Tabelle wird nicht aktualisiert!Event-Handler-Einstellung-Status von einer untergeordneten Komponente wird nicht übergeordnete Komponente erneut rendern

class App extends React.Component { 
    root = 'https://fcctop100.herokuapp.com/api/fccusers/top/'; 
    allTime = 'alltime'; 
    recent = 'recent'; 

    constructor(props) { 
     super(props); 
     this.state = { data: null, 
        url: this.root + this.allTime }; 
     this.changeUrl = this.changeUrl.bind(this); 
    } 

    componentDidMount() { 
     return fetch(this.state.url) 
     .then(response => response.json()) 
     .then(responseJson => { 
      this.setState({ data: responseJson }); 
     }); 
    } 

    changeUrl() { 
     this.setState({ url: this.root + this.recent }); 
    } 

    render() { 
     return (
     <div id="container"> 
      <Head /> 
      <TableOfContents handleClick={this.changeUrl} /> 
      <Tables data={this.state.data}/> 
     </div> 
    ); 
    } 
} 

const Head = (props) => { 
    return (
     <div className="head"> 
     freeCodeCamp Leaderboard 
     </div> 
    ); 
} 

const TableOfContents = (props) => { 
    return (
     <div className="tableOfContents"> 
     <tr className="headers" > 
      <td>#</td> 
      <td id='special'>Camper Name</td> 
      <td onClick={props.handleClick} style={{cursor: 'pointer'}}>Points in last 30 days</td> 
      <td>All time points</td> 
     </tr> 
     </div> 
    ); 
} 

const Tables = (props) => { 
    if (!props.data) return <p>Loading...</p>; 
    return (
     <div className="tables"> 
     { 
      props.data.map((d, i) => 
       <tr id={'table' + i}> 
        <td>{i + 1}</td> 
        <td><img src={d.img} /></td> 
        <td>{JSON.stringify(d.username).replace(/"/g, '')}</td> 
        <td>{JSON.stringify(d.recent)}</td> 
        <td>{JSON.stringify(d.alltime)}</td> 
       </tr>) 
     } 
     </div> 
    ); 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);

Quelle

2017-10-29 Yungil Hong