【React.js】setTimoutでJsonファイルを取得して表示したい

jsonを用意します。

{
    "name": "Morpheush1"
}

let dom = document.querySelector('#root');

class Welcome extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: null,
      };
    }
  
    componentDidMount() {
        this.timer = setInterval(
            () => 
                fetch('./data/test.json').then(response => {
                    return response.json();
                    }).then(json => {
                        this.setState({ data: json});
                    }),
            1000,
        );
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }
  
    render() {
      if (this.state.data) {
        return <p>{this.state.data.name}</p>
      }
      else {
        return <div>Loading...</div>
      }
    }
  }

let el = (
    <div>
        <Welcome/>
    </div>
);

ReactDOM.render(el, dom);

jsonを更新すると、ページも更新されるのがわかります。

OKやな

jsonが入れ子の場合

[{"name": "Morpheush4"},{"name": "Morpheush5"}]

js側
this.state.data[0]

サーバ側でデータを作る際に、入れ子のjsonデータを作らないといけない。
なるほど〜　これはちょっと厄介やな…