Rendu des composants React à partir d'un tableau d'objets

J'ai des données appelées stations qui sont un tableau contenant des objets.

stations : [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]

Je voudrais rendre un composant d'interface utilisateur pour chaque position de tableau. Jusqu'ici je peux écrire

 var stationsArr = []
 for (var i = 0; i < this.data.stations.length; i++) {
     stationsArr.push(
         <div className="station">
             {this.data}
         </div>
     )
 }

Et puis rendre

render(){
 return (
   {stationsArr}
 )
}

Le problème est que j'imprime toutes les données. Je veux plutôt afficher une clé comme {this.data.call}mais qui n'imprime rien.

Comment puis-je parcourir ces données et renvoyer un nouvel élément d'interface utilisateur pour chaque position du tableau?

Vous pouvez mapper la liste des stations à ReactElements.

Avec React> = 16, il est possible de renvoyer plusieurs éléments du même composant sans avoir besoin d'un wrapper d'élément html supplémentaire. Depuis 16.2, il existe une nouvelle syntaxe <> pour créer des fragments. Si cela ne fonctionne pas ou n'est pas pris en charge par votre IDE, vous pouvez utiliser à la <React.Fragment>place. Entre 16.0 et 16.2, vous pouvez utiliser un polyfill très simple pour les fragments.

Essayez ce qui suit

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
  <>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </>
); 

// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here

const Test = ({stations}) => (
  <div>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </div>
); 

// old syntax
var Test = React.createClass({
    render: function() {
        var stationComponents = this.props.stations.map(function(station) {
            return <div className="station" key={station.call}>{station.call}</div>;
        });
        return <div>{stationComponents}</div>;
    }
});

var stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]; 

ReactDOM.render(
  <div>
    <Test stations={stations} />
  </div>,
  document.getElementById('container')
);

N'oubliez pas l' keyattribut!

https://jsfiddle.net/69z2wepo/14377/

J'ai une réponse qui pourrait être un peu moins déroutante pour les débutants comme moi. Vous pouvez simplement utiliser mapdans la méthode de rendu des composants.

render () {
   return (
       <div>
           {stations.map(station => <div key={station}> {station} </div>)} 
       </div>
   );
}

this.data contient probablement toutes les données, vous devrez donc faire quelque chose comme ceci:

var stations = [];
var stationData = this.data.stations;

for (var i = 0; i < stationData.length; i++) {
    stations.push(
        <div key={stationData[i].call} className="station">
            Call: {stationData[i].call}, Freq: {stationData[i].frequency}
        </div>
    )
}

render() {
  return (
    <div className="stations">{stations}</div>
  )
}

Ou vous pouvez utiliser les mapfonctions fléchées et si vous utilisez ES6:

const stations = this.data.stations.map(station =>
    <div key={station.call} className="station">
      Call: {station.call}, Freq: {station.frequency}
    </div>
);

Il y a quelques moyens qui peuvent être utilisés.

const stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
];
const callList = stations.map(({call}) => call)

Solution 1

<p>{callList.join(', ')}</p>

Solution 2

<ol>    
  { callList && callList.map(item => <li>{item}</li>) }
</ol>

Bien sûr, il existe d'autres moyens également disponibles.