eliminar - lista de objetos javascript

Representación de componentes de reacción a partir de una matriz de objetos

Question

Tengo algunos datos llamados estaciones, que es una matriz que contiene objetos.

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

Me gustaría representar un componente ui para cada posición de matriz. Hasta ahora puedo escribir

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

Y luego renderizar

render(){
 return (
   {stationsArr}
 )
}

El problema es que estoy imprimiendo todos los datos. En cambio, solo quiero mostrar una clave como {this.data.call} pero eso no imprime nada.

¿Cómo puedo recorrer estos datos y devolver un nuevo elemento de interfaz de usuario para cada posición de la matriz?

Answer 1

Puede asignar la lista de estaciones a ReactElements.

Con React> = 16, es posible devolver múltiples elementos del mismo componente sin necesidad de un contenedor de elementos html adicional. Desde 16.2, hay una nueva sintaxis <> para crear fragmentos. Si esto no funciona o su IDE no lo admite, puede usar <React.Fragment> lugar. Entre 16.0 y 16.2, puede usar un polyfill muy simple para fragmentos.

Intenta lo siguiente

// 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'')
);

¡No olvides el atributo key !

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

Answer 2

Tengo una respuesta que podría ser un poco menos confusa para los novatos como yo. Simplemente puede usar el map dentro del método de representación de componentes.

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

Answer 3

this.data presumiblemente contiene todos los datos, por lo que deberá hacer algo como esto:

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>
  )
}

O puede usar las funciones de map y flecha si está usando ES6:

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