• react.png
  • angular.png
  • node.png
  • html5.png
  • php.png

El uso de .map() en React

ReactLogo.jpg

Hola chicos, como saben el método .map() nos crea un nuevo array con los resultados de la llamada de la función indicada aplicados a cada uno de sus elementos.

 

Un simple uso de .map() fuera sin utilizar React, sería el siguiente:

// Creates a new array with the results of calling a provided function on every element of an array.
var forecast = [
{day: 'Monday', sun: true, humidity: 10},
{day: 'Tuesday', sun: false, humidity: 100},
{day: 'Wednesday', sun: true, humidity: 100},
{day: 'Thursday', sun: false, humidity: 25},
{day: 'Friday', sun: true, humidity: 100},
{day: 'Saturday', sun: false, humidity: 10},
{day: 'Sunday', sun: true, humidity: 10}
];


// We can use the .map more simple
var humid = forecast.map(function(item){
    return item.humidity;
});

console.log('humid', humid);

Ahora colocare un ejemplo de uso del método .map() en React:

/ /Method for render the HTML tags
class MapComponent extends Component {
    constructor() {
        super();

        this.state = {
            users: [
                {
                    id: 1,
                    name: 'cristina'
                },
                {
                    id: 2,
                    name: 'carlos'
                }
            ]
        };
    }

    render() {
        return(
            <div className="wrapper-map">
                <h2> Map Use </h2>
                <ul>
                    {this.state.users.map((user, i) =>
                        <li key={i}>{user.name}</li>
                    )}
                </ul>
            </div>
        );
    }
}

export default MapComponent;

@telecristy.

 

0/1000

Necesitas conectarte ó registrarte para comentar