REACT JS VERSION 4.0.2 map 方法无法正常工作

Question

    state = {
    size: { rows: 5, cols: 5 },
    
    bits: ['bit1', 'bit2', 'bit3', 'bit5', 'bit7'],
  };

  render() {
    return (
      <div className="badge m-3 badge-warning">
        <ul>
          {this.state.bits.map((bit) => {
            <li>{bit}</li>;
          })}
        </ul>
      </div>
    );
  }
}

这是我写的代码。我的期望是得到这样的东西

<div className="badge m-3 badge-warning">
   <ul>
     <li>bit1</li>
     <li>bit2</li>
     .
     .
     <li>bit7</bit>
</div>

但我在<ul> 之间没有<li> 标记...这是什么错误？

Answer 1

这样试试

{this.state.bits.map((item,idx) => (
    <li key={idx}> {item}</li>
)}

或

{this.state.bits.map((item, idx) => {
   return <li key={idx}>{item}</li>
}