How to loop map in react

The method of react looping map: first open the corresponding code file; then add a key as a unique identifier to the child element; and finally use map to traverse.

The operating environment of this tutorial: windows7 system, react17.0.1 version, Dell G3 computer.

Recommended: react video tutorial

Map traversal in react

<ul id="ul_rwardList">
    {
        this.state.reward.map(function (item) {
            return (
                <li className="db vh" key={item.id}>
                    <div className="fx1">{item.num}</div>
                    <div className="fx1">{item.username}</div>
                    <div className="fx1 text-right">{item.rward_time}</div>
                </li>
            )})
    }
</ul>

tips: When using map traversal, you need to give Add a key to the child element as a unique identifier, and the key values ​​must be consecutive

The above is the detailed content of How to loop map in react. For more information, please follow other related articles on the PHP Chinese website!