REACT JS VERSION 4.0.2 map method not working properly

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>
    );
  }
}

This is the code I have written. My expectation was to get something like this

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

But I got no <li> tags in between the <ul>...What is the mistake?

Does this answer your question? [map function not working in React](https://stackoverflow.com/questions/39999671/map-function-not-working-in-react) and [Map function not return item in render reactjs?](https://stackoverflow.com/questions/49063814) — adiga, Feb 15 '21 at 05:32
[When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450) — adiga, Feb 15 '21 at 05:38

Florin · Answer 1 · 2021-02-16T09:30:38.670

-1

Try like this

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

or

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

edited Feb 16 '21 at 09:30

answered Feb 15 '21 at 05:54

Florin

292
2
13

Well thank u so much ... The second one worked for me .... But can u explain? – Joydeep Bhattacharjee Feb 15 '21 at 10:00
The difference between your example and mine is `return` . In your example the function doesn t return nothing. You must to return – Florin Feb 16 '21 at 09:29

REACT JS VERSION 4.0.2 map method not working properly

1 Answers1