React: Mapping an array of data

Question

I am trying to map data that I have in an array, however, the data is not mapped when I run the code. If I log the data (serials variable), it logs the variables that I would like to map (screenshot below). Does anyone have any suggestions about why the data isn't mapped?

numberList() {
  const uid = this.state.user.uid;
    const serialRef = db.ref(uid + "/serials");
    
    serialRef.on("value", (serial_numbers)=> {
      const serials = [];
      serial_numbers.forEach((serial_number)=> {
        serials.push({s:serial_number.val()});
      });
      console.log(serials);
  return (
    <ul>
      {serials.map((number) => <li>{number}</li>)};
    </ul>
  );
    });

}
        render (){
        return (
          <button onClick={this.numberList}>Cards</button>
        )};

}

Thanks in advance!

> the data is not mapped when I run the code how did you notice this? — topdev87
– topdev87, Commented Nov 10, 2020 at 6:44
When I click on the button the list doesn't appear on the page. — Nina
– Nina, Commented Nov 10, 2020 at 8:55

tuhin47 · Accepted Answer · 2020-11-10 06:44:25Z

1

From your log I assume the map should be as below to get exact number.

 return (
    <ul>
      {serials.map((number) => <li>{number.s.serial}</li>)};
    </ul>
  );

answered Nov 10, 2020 at 6:44

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nina Over a year ago

Thank you for your answer. However, it still doesn't show the values when I click the button, only the array gets logged in the console.

Faire · Accepted Answer · 2020-11-10 06:44:57Z

1

The "numbers" you are mapping are objects (according to the log you attached), but React JS doesn't allow to display objects directly - you probably only want to display the value anyway. You should also include a key when generating a view from an array of objects. The correct code should be this:

<ul>
      {serials.map((number, i) => <li key={i}>{number.s.serial}</li>)};
</ul>

answered Nov 10, 2020 at 6:44

Faire

1,0613 gold badges18 silver badges38 bronze badges

2 Comments

Nina Over a year ago

Thanks for your reply. But the list of data still doesn't appear on the page when I clik the button.

Faire Over a year ago

Do you get any errors? Is it a blank screen or are other elements rendered?

Collectives™ on Stack Overflow

React: Mapping an array of data

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related