JSONデータをReactでリスト表示する

単一コンポーネント

this.setStateメソッドでstateとして取得

componentDidMount() {
  $.ajax({
      url: this.props.url,
      data: {
          q: "select title from feed where url = '" + this.props.target + "'",
          format: "json"
      },
      type: 'GET',
      dataType: 'json',
      success: function(res) {
        for (var i in res.query.results.entry) {
          console.log(res.query.results.entry[i].title);
        }
        this.setState({entry: res.query.results.entry});
      }.bind(this),
      error: function(xhr, status, err) {
        console.log(this.props.targetURL, status, err.toString());
      }.bind(this)
    });
}

その初期stateは配列にしておく

class FeedTitle extends React.Component {
  constructor() {
    super();
    this.state = ({
      entry: []
    });
  }

mapメソッドを使ってstateをリスト表示。その際、ユニークなkeyを渡す。

  render() {
    return(
      <ol>
       {this.state.entry.map(function(index) {
         return <li key={index.title}>{index.title}</li>;
       })}
      </ol>
    );
  }
}

ReactDOM.render (
  <FeedlTitle url="http://query.yahooapis.com/v1/public/yql?callback=?"  target="http://uraway.hatenablog.com/feed" />,
document.getElementById('content')
);

ソースコード

class FeedlTitle extends React.Component {
  constructor() {
    super();
    this.state = ({
      entry: []
    });
  }


  componentDidMount() {
    $.ajax({
        url: this.props.url,
        data: {
            q: "select title from feed where url = '" + this.props.target + "'",
            format: "json"
        },
        type: 'GET',
        dataType: 'json',
        success: function(res) {
          for (var i in res.query.results.entry) {
            console.log(res.query.results.entry[i].title);
          }
          this.setState({entry: res.query.results.entry});
        }.bind(this),
        error: function(xhr, status, err) {
          console.log(this.props.targetURL, status, err.toString());
        }.bind(this)
      });
  }

  render() {
    return(
      <ol>
       {this.state.entry.map(function(index) {
         return <li key={index.title}>{index.title}</li>;
       })}
      </ol>
    );
  }
}

ReactDOM.render (
  <FeedlTitle url="http://query.yahooapis.com/v1/public/yql?callback=?"  target="http://uraway.hatenablog.com/feed" />,
document.getElementById('content')
);

複数コンポーネント

コンポーネントを複数作る時、keyは内包されたHTMLではなく、コンポーネントに直接渡すことに注意する。

class FeedTitle extends React.Component {

~~~~~~

  render() {
    return(
      <ul>
        {this.state.entry.map(function(index) {
          return <TitleList key={index.title} index={index} />;
        })}
      </ul>
    );
  }
}

class TitleList extends React.Component {
  render() {
    <ol>{this.props.index.title}</ol>;
  }
}

keyについてはこちらKeyed Fragmentsを読むともっと面白い。