how to show data in JSX in the iteration?

Question

The issue is that the variable is having the value when I console.log but it is not rendering in the page. The loop print only the first data and other data is not printed.

const langData = [
  {
    name: "Front-End",
    children: [
      {
        name: "HTML"
      },
      {
        name: "CSS"
      },
      {
        name: "JS"
      }
    ]
  }
];
const renderName = ({ name, children }) => {
  console.log(name);
  return (
    <>
      <p>{name}</p>
      {children && children.forEach(newData => renderName(newData))}
    </>
  );
};

const App = () => {
  return <div className="App">{renderName(langData[0])}</div>;
};

Eg: Front-End will be on the page. Other data such as HTML, CSS, JS not showing in the page. But these variables are in the console.log. Not sure I miss to return any value.

Codesandbox link: https://codesandbox.io/s/reverent-ardinghelli-6snby?fontsize=14

Winston Jude · Accepted Answer · 2019-10-01T07:50:28.223

Using map you can get go over the array. The reason why map works and forEach does not is because map returns a new array while forEach does not return anything(returns undefined). You also need to add keys to get rid of the warning. I've used the index of the array as the key here:

const renderName = ({ name, children }, key) => {
  console.log(name);
  return (
    <>
      <div key={key}>
      <p>{name}</p>
      {children && children.map((newData,index) => renderName(newData, index))}
      </div>
    </>
  );
};

aldenn · Answer 2 · 2019-10-01T07:43:17.993

with render an array, you should use map, because .forEach always return undefined:

const renderName = ({ name, children, index }) => {
  console.log(name);
  return (
    <div key={index}>
      <p>{name}</p>
      {children && children.map((item, index)=> {
        const { name } = item;
        return renderName({name, index})
      })}
      {/* {children && children.forEach(newData => renderName(newData))} */}
    </div>
  );
};

Prakash Karena · Answer 3 · 2020-01-16T04:51:39.123

Try this you will directly get your result.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
const langData = [
  {
    name: "Front-End",
    children: [
      {
        name: "HTML"
      },
      {
        name: "CSS"
      },
      {
        name: "JS"
      }
    ]
  }
];
const renderName = (name,data) => (
  //console.log(name);
  <>
    <p>{name}</p>
    {data && data.map(child => (
      <p>{child.name}</p>
    ))}
  </>
);

const App = () => {
  return <div className="App">{renderName(langData[0].name,langData[0].children)}</div>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

how to show data in JSX in the iteration?

3 Answers3