Problem to generate labels by traversing arrays in React

React traversal array to generate labels

Give an example

A list renders li elements based on an array, and a v-for in vue is solved. How to implement it in React?

The React file we directly introduced here is not used for scaffolding

let arr = [1,2,3];
        (<ul>
                {
                    (value => <li key={value}>{value}</li>)
                }
            </ul>,('#root'))

But why use the map method here? Because map will return a new array, which is equivalent to returning this array in this place

let arr = [<li>1</li>, <li>2</li>, <li>3</li>]

This is the rendered array.

React function implementation - array traversal rendering

How to traverse an array in react and render it on the page one by one?

1. In jsx rendering

If this variable is an array, all members of the array are expanded.

var arr = [
      <h1>Hello world!</h1>,
      <h2>React is awesome</h2>,
    ];
    (
      <div>{arr}</div>,
      ('example')
    );

Two divs will be generated in the example element, one with the h1 tag and the other with the h2 tag.

().

<ul>
        { 
            (function(val){ 
                return <li>{val}</li>
            })</ul>

The parameter of () is a function, which is the function that the element in each array should execute, and the parameter is val.

In fact, this method also depends on the first feature, because () has a return value, and the return value is a new array. So it is ultimately equivalent to <ul>{newArray}</ul>

3. Why can't you use forEach()?

Because forEach() does not return a value

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.