Traversing the array using the map() method produces a list of numbers from 1 to 5

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

const arr=[1,2,3,4,5];
const items=arr.map(val=>
  <li>{val}</li>
)

  ReactDOM.render(
    <div>
      <ul>
        {items}
      </ul>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

Reassemble the above instance into a component, which receives array parameters and assigns a key to each list element
a key should be provided for list items

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

function NumList(props){
  const arr=props.arr;
  const items=arr.map(val=>
    <li key={val.toString()}>{val}</li>
  )

  return(
    <ul>{items}</ul>
  )
}

const arr=[11,22,33];
  ReactDOM.render(
    <div>
      <NumList arr={arr}/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

Keys can help React recognize which elements have changed when some elements in the DOM are added or deleted
The key of an element is a unique string that the element has in the list. The id from the data is usually used as the key of the element
When the element does not have a certain id, you can use the serial number index as the key
If the list can be reordered, it is not recommended to use indexes for sorting, as this can cause rendering to become slow

The key used in an array element should be unique among its siblings.
However, they do not need to be globally unique. When generating two different arrays, you can use the same key.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

function Blogs(props){
  const left=(
    <ul>
      {
        props.posts.map(val=>
          <li key={val.id}>{val.title}</li>
        )
      }
    </ul>
  )

  const right=props.posts.map(val=>
    <div key={val.id}>
      <h3>{val.title}</h3>
      <p>{val.content}</p>
    </div>
  )

  return(
    <div>
      {left}
      <hr/>
      {right}
    </div>
  )
}

const posts=[
  {id:1,title:'title1',content:'content1'},
  {id:2,title:'title2',content:'content2'}
];

  ReactDOM.render(
    <div>
      <Blogs posts={posts}/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

key will be used as a prompt to React, but will not be passed to the component.
If you need to use the same value as the key in the component, you need to pass it as an attribute

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

JSX allows any expression to be embedded in braces

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

function NumList(props){
  const list=props.list;
  return(
    <ul>
    {list.map(val=>
      <li key={val.toString()}>{val}</li>
    )}
    </ul>
  )
}

const lists=['a','b','c'];

  ReactDOM.render(
    <div>
      <NumList list={lists}/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();