如何使用ReactJS中的组件加载列表数据？

Question

I am trying to render some data using 'ListItem' component in ReactJS. But the component is not getting the data. I also tried to load the data without using 'ListItem' component. In that case it is successfully rendering.

So, How can i load the data using 'ListItem' component?

import React, { Component } from 'react';

function ListItem(props) {
  console.log(props);
  return <li>{props.value}</li>;
}

class NumberList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const numbers = this.props.numbers;

    const listItems = numbers.map( (number) => {
      <ListItem key={number.toString()} value={number} />
    });

    console.log(listItems);
    return(
      <ul>
        {
        // numbers.map( n => {
        //   return <li>{n}</li>
        // } ) 
        listItems
        }
      </ul>
    );
  }
}

export default NumberList;

Answer 1

You are returning undefined in your map -function.

Try changing to this:

const listItems = numbers.map( (number) => {
  return <ListItem key={number.toString()} value={number} />
}); 

or:

// By omitting the {} around the callback function body
// you can utilise the implicit-returning feature of arrow functions.
const listItems = numbers.map( (number) => (
  <ListItem key={number.toString()} value={number} />
));

// The above example is the same as:
const listItems = numbers.map( (number) => <ListItem key={number.toString()} value={number} />);

Answer 2

You are using the arrow function notation inside the map. When you use it with braces ({ and }), you should add a return to the statement you wish to return.

const add = (a, b) => {
    return a + b;
};

When your function has just one statement, you can omit the braces and place only the statement at the right side of the arrow, like this:

const add = (a, b) => a + b;

But if you add the braces, but does not write a return statement, then the function will return undefined. So, this would return undefined:

const add = (a, b) => {
    const sum = a + b;
};

Answer 3

You have to return your listitem component from map. You are returning li items in your commented code. But looks like you missed adding return when converting it to use ListItem.