Reactでは、HTMLテーブルにAPIからのデータを表示する方法は？

Question

サンプルAPIのデータを表示しようとしています。現時点では私は、配列をループすることができるよ、例えば、すべてのタイトルを表示する：ここで

EventTitle1 
EventTitle2 
EventTitle3 
... 

は私のコードは次のとおりです。

class App extends React.Component { 
 
constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: [] 
 
    } 
 
} 
 
    
 
componentDidMount() { 
 
var th = this; 
 
this.serverRequest = axios.get(this.props.source) 
 
.then(function(event) { 
 
    th.setState({ 
 
     data: event.data 
 
    }); 
 
}) 
 
} 
 

 
componentWillUnmount() { 
 
    this.serverRequest.abort(); 
 
} 
 
    
 
render() { 
 
var titles = [] 
 
this.state.data.forEach(item => { 
 
    titles.push(<h3 className=”events”>{item.title[0].value}</h3>); 
 
}) 
 
return (
 
    <div className=”container”> 
 
     <div className=”row”> 
 
     <div className=”col-md-6 col-md-offset-5"> 
 
      <h1 className=”title”>All Events</h1> 
 
      {titles} 
 
     </div> 
 
     </div> 
 
    </div> 
 
); 
 
} 
 
} 
 

 
ReactDOM.render(
 
    <App source=”http://localhost:8888/example/api/events" />, 
 
    document.getElementById(‘container’) 
 
);

どのように私ができますHTMLテーブルを作成して、APIの最新の5つのイベントタイトル（および後で他のデータ）のみを表の中に表示しますか？例えば

：

return (
    <table> 
     <tr> 
     <th>Event title</th> 
     <th>Event location</th> 
     </tr> 
     <tr> 
     <td>First event title {titles[0]} ?? </td> 
     <td>San Fran</td> 
     </tr> 
     <tr> 
     <td>Second event title {titles[1]} ??</td> 
     <td>London</td> 
     </tr> 
    </table> 
); 

Answer 1

は<tr>のアレイを作成し、テーブルにそれを追加します。

class App extends React.Component { 
 
constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: [] 
 
    } 
 
} 
 
    
 
componentDidMount() { 
 
var th = this; 
 
this.serverRequest = axios.get(this.props.source) 
 
.then(function(event) { 
 
    th.setState({ 
 
     data: event.data 
 
    }); 
 
}) 
 
} 
 

 
componentWillUnmount() { 
 
    this.serverRequest.abort(); 
 
} 
 
    
 
render() { 
 
const contents = this.state.data.forEach(item => { 
 
     //change the title and location key based on your API 
 
     return <tr> 
 
     <td>{item.title}</td> 
 
     <td>{item.location}</td> 
 
     </tr> 
 
}) 
 
return (
 
    <div className=”container”> 
 
     <div className=”row”> 
 
     <div className=”col-md-6 col-md-offset-5"> 
 
      <h1 className=”title”>All Events</h1> 
 
      <table> 
 
       <tr> 
 
       <th>Event title</th> 
 
       <th>Event location</th> 
 
       </tr> 
 
       {contents} 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
); 
 
} 
 
} 
 

 
ReactDOM.render(
 
    <App source=”http://localhost:8888/example/api/events" />, 
 
    document.getElementById(‘container’) 
 
);

Answer 2

あなたは単にあなたの配列の最初の5つの要素を取得するためにslice演算子を使用して、直接mapを使用することができます。

titlesアレイを使用する必要はありません。jsxにスニペットをインラインで挿入するだけです。

コードの重要な部分である：ここでは完全な例である

<table> 
    {data.slice(0,5).map(event => (<tr> 
     <td>{event.title}</td> 
     <td>{event.location}</td> 
    </tr>))} 
</table> 

：

class App extends React.Component { 
 
constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: [] 
 
    } 
 
} 
 
    
 
componentDidMount() { 
 
var th = this; 
 
this.serverRequest = axios.get(this.props.source) 
 
.then(function(event) { 
 
    th.setState({ 
 
     data: event.data 
 
    }); 
 
}) 
 
} 
 

 
componentWillUnmount() { 
 
    this.serverRequest.abort(); 
 
} 
 
    
 
render() { 
 
return (
 
    <div className=”container”> 
 
     <div className=”row”> 
 
     <div className=”col-md-6 col-md-offset-5"> 
 
      <h1 className=”title”>All Events</h1> 
 
      <table> 
 
       <tr> 
 
        <th>Event title</th> 
 
        <th>Event location</th> 
 
       </tr> 
 
       {this.state.data.slice(0,5).map(event => (<tr> 
 
        <td>{event.title}</td> 
 
        <td>{event.location}</td> 
 
       </tr>))} 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
); 
 
} 
 
} 
 

 
ReactDOM.render(
 
    <App source=”http://localhost:8888/example/api/events" />, 
 
    document.getElementById(‘container’) 
 
);