React Map

  • Post
    React Map

    Peta adalah tipe pengumpulan data dimana data disimpan dalam bentuk berpasangan. Ini berisi kunci unik. Nilai yang disimpan di map harus dipetakan ke kunci. Kami tidak dapat menyimpan pasangan duplikat di map (). Itu karena keunikan setiap kunci yang disimpan. Ini terutama digunakan untuk pencarian cepat dan mencari data.

    Di React, Map? metode yang digunakan untuk melintasi dan menampilkan daftar objek serupa dari suatu komponen. Peta bukanlah fitur React. Sebaliknya, ini adalah fungsi JavaScript standar yang dapat dipanggil pada larik apa pun. Metode map () membuat larik baru dengan memanggil fungsi yang disediakan pada setiap elemen dalam larik pemanggil.

    Contoh

    Dalam contoh yang diberikan, fungsi map () mengambil larik angka dan menggandakan nilainya. Kami menetapkan array baru yang dikembalikan oleh map () ke variabel doubleValue dan mencatatnya.

    1. var numbers = [1, 2, 3, 4, 5];
    2. constdoubleValue = numbers.map((number)=>{
    3. return (number * 2);
    4. });
    5. log(doubleValue);

    Di React, metode map () digunakan untuk:

    1. Melintasi elemen daftar.

    Contoh

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. function NameList(props) {
    4. const myLists = props.myLists;
    5. const listItems = myLists.map((myList) =>
    6. <li>{myList}</li>
    7. );
    8. return (
    9. <div>
    10. <h2>React Map Example</h2>
    11. <ul>{listItems}</ul>
    12. </div>
    13. );
    14. }
    15. constmyLists = [‘A’, ‘B’, ‘C’, ‘D’, ‘D’];
    16. render(
    17. <NameList myLists={myLists} />,
    18. getElementById(‘app’)
    19. );
    20. export defaultApp;
    21. Melintasi elemen daftar dengan kunci.

    Contoh

    1. import React from ‘react’;
    2. import ReactDOM from ‘react-dom’;
    3. function ListItem(props) {
    4.   return <li>{props.value}</li>;
    5. }
    6. function NumberList(props) {
    7.   const numbers = props.numbers;
    8.   const listItems = numbers.map((number) =>
    9.     <ListItem key={number.toString()}
    10.               value={number} />
    11.   );
    12.   return (
    13.     <div>
    14.       <h2>React Map Example</h2>
    15.           <ul> {listItems} </ul>
    16.     </div>
    17.   );
    18. }
    19. const numbers = [1, 2, 3, 4, 5];
    20. ReactDOM.render(
    21.   <NumberList numbers={numbers} />,
    22.   document.getElementById(‘app’)
    23. );
    24. export default App;
    1. }
    2. nomor const = [ 1 ,  2 ,  3 ,  4 ,  5 ];
    3. render (
    4. <NumberList numbers = {numbers} />,
    5. getElementById ( ‘app’ )
    6. );
    7. ekspor   Aplikasi default ;

     

    credit. javatpoint

     

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.