将代码分离为函数并调用它不会呈现

Question

This works perfectly fine. Now, I would like to incorporate this into a function and just call the function within my expression. It doesn't work.

Working code:

 render: function() {
      return (
        <div>
          {this.props.list.map(function(listValue){
            return <p>{listValue}</p>;
          })}
        </div>
      )
    }
  });

  ReactDOM.render(<List list={[1,2,3,4,5]} />, document.getElementById('app'));

code with the function (doesn't work):

   var List = React.createClass({
    addText: function()
    {
         this.props.list.map(function(listValue){
            return <p>{listValue}</p>;
        });
    },
    render: function() {
      return (
        <div>
         {this.addText()}
        </div>
      )
    }
  });

  ReactDOM.render(<List list={[1,2,3,4,5]} />, document.getElementById('app'));

Answer 1

You've extracted the call to map into another function and maybe assumed the return call inside it was sufficient to return the result of the whole call (it just returns the mapped value for that iteration of map).

You just need to return the result of your map in your addText function:

var List = React.createClass({
    addText: function()
    {
        return (  // <------ADD THIS
           this.props.list.map(function(listValue){
            return <p>{listValue}</p>;
          })
        );  //<<-----DON'T FORGET TO CLOSE OFF THE NEW BRACKET
    },
    render: function() {
      return (
        <div>
         {this.addText()}
        </div>
      )
    }
  });

Answer 2

Tnx @Thomas altmann , I forgot to make another return prior to my first return

var List = React.createClass({
    addText: function()
    {
         return (this.props.list.map(function(listValue){
            return <p>{listValue}</p>;
        })
         );
    },
    render: function() {
      return (
        <div>
         {this.addText()}
        </div>
      )
    }
  });

  ReactDOM.render(<List list={[1,2,3,4,5]} />, document.getElementById('app'));