HTML tags are not rendered while iterating over an array in ReactJS

Question

I am quite new to ReactJS and still playing with the basic concepts, so the answer to my question might look obvious for pros ;)

I have a component as below:

import React from "react";

function NameList(props) {
  const names = ["Bruce", "Clark", "Diana"];
  return (
    <div>
      {names.map((x) => {
        <h1>{x}</h1>;
        console.log({ x });
      })}
    </div>
  );
}

export default NameList;

Can someone tell me why the h1 tags are not rendered while the values are written in the console?

Ryan Le · Accepted Answer · 2021-08-29 10:57:03Z

2

You will need to return something from a map() function:

import React from "react";

function NameList(props) {
  const names = ["Bruce", "Clark", "Diana"];
  return (
    <div>
      {names.map((x) => {
        console.log(x);
        return <h1>{x}</h1>;
      })}
    </div>
  );
}

export default NameList;

Or direct return like this:

import React from "react";

function NameList(props) {
  const names = ["Bruce", "Clark", "Diana"];
  return (
    <div>
      {names.map((x) => (
        <h1>{x}</h1>
      ))}
    </div>
  );
}

export default NameList;

answered Aug 29, 2021 at 10:57

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

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

Comments

Majid M. · Accepted Answer · 2021-08-29 11:00:43Z

1

Just add return before the <h1> tag based on the syntax which have been used:

function NameList(props) {
  const names = ["Bruce", "Clark", "Diana"];
  return (
    <div>
      {names.map((x) => {
        console.log({ x });
        return <h1>{x}</h1>;
      })}
    </div>
  );
}

answered Aug 29, 2021 at 11:00

Majid M.

4,9941 gold badge16 silver badges35 bronze badges

Collectives™ on Stack Overflow

HTML tags are not rendered while iterating over an array in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related