如何在每列中循环播放列表的每一项？

Question

列表项数据循环，但是我无法循环单个col-md-4的每个列表项。但是列表项仅通过一个col-md-4循环，我希望列表的每个项在每个col中显示。请建议我

import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    let countries = [
      { name: "Bangladesh", capital: "Dhaka" },
      { name: "Belgium", capital: "Brussels" },
      { name: "France", capital: "Paris" },
      { name: "Greece", capital: "Athens" }
    ];

    return (
      <div className="App">

            <div className="row">
              <div className="col-md-4">
                <ul>
                  {countries.map(country => (
                    <li>
                      Capital of {country.name} is {country.capital};
                   </li>
                  ))}
                </ul>
              </div>

            </div>


      </div>
    );
  }
}

export default App;

Answer 1

import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    let countries = [
      { name: "Bangladesh", capital: "Dhaka" },
      { name: "Belgium", capital: "Brussels" },
      { name: "France", capital: "Paris" },
      { name: "Greece", capital: "Athens" }
    ];

    return (
      <div className="App">

            <div className="row">
              {countries.map(country => (<div className="col-md-4">
                <ul>
                  
                    <li>
                      Capital of {country.name} is {country.capital};
                   </li>
                 
                </ul>
              </div> ))}

            </div>


      </div>
    );
  }
}

export default App;