How to display data in a grid manner on React JS?

Question

I'm new to reactjs, i want to retrieve the skills data from json file. i'm unable to retrieve json data in a grid format as shown in pic. Don't know where i'm going wrong :(.. Can anyone help me in this? thanks for advance.

[
    {
        "id": 1,
         "fullname": "ABC",
        "skills": [
            {"name": "asp.net mvc"},
                {"name": "css"},
                {"name": "knockout js"},
                {"name":"monitoring"},
                {"name":"ui"},
                {"name": "ajax"},
                {"name":"code review"},
                {"name": "design pattern"},
                {"name": "entity from work"},
                {"name":"git"},
                {"name":"ioc"},
                {"name":"jquery"},
                {"name":"json"},
              ]

    },

    {
        "id": 2,
         "fullname": "edf",
        "skills": [{"name":"core java"},
            {"name":"oracle"},
            {"name":"asp.net"},
            {"name":"web api"},
            {"name":"artificial in.."},
            {"name":"c#"},
            {"name":"software eng.."}]


    }
]

and the code is :

import profiles from "./data.json";

export default class Skills extends React.Component {
    render(){
        return(
            <div>
            <ul >
                          {
                            profiles.skills.map((skillDetail,i) => {
                              return (
                                  <li key={i}>
                                    {skillDetail.Name}
                                  </li>
                              );
                            })
                          }
                        </ul>
            </div>
        );
    }
}

Answer 1

You may update your <ul></ul> with this:

<ul className="grid_list">
    {profiles && profiles.length > 0
    ? profiles.map((p, pI) =>
        p.skills.map((s, i) => {
            return <li key={`${pI}${i}`}>{s.name}</li>;
        })
      )
    : null}
</ul>

And add a grid_list css class on your index.css which bring your <li/> in a grid layout

.grid_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

Update

If you want to separate list by id then you need to bring you <ul> inside the 1st .map like this one

<div>
      {profiles && profiles.length > 0
        ? profiles.map((p, pI) => (
            <React.Fragment key={`fr${pI}`}>
              <span>{p.fullname}</span>
              <ul className="grid_list" key={pI}>
                {p.skills.map((s, i) => {
                  console.log(`${pI}${i}`);
                  return <li key={`${pI}${i}`}>{s.name}</li>;
                })}
              </ul>
            </React.Fragment>
          ))
        : null}
    </div>

It will give you the UI like this

Is that meet your idea?

Using console to check the data

import profiles from "./data.json";

export default class Skills extends React.Component {
//log your data here
console.log(profiles);

    render(){
        return(
<div>
          {profiles && profiles.length > 0
            ? profiles.map((p, pI) => (
                <React.Fragment key={`fr${pI}`}>
                  <span>{p.fullname}</span>
                  <ul className="grid_list" key={pI}>
                    {p.skills.map((s, i) => {
                      console.log(`${pI}${i}`);
                      return <li key={`${pI}${i}`}>{s.name}</li>;
                    })}
                  </ul>
                </React.Fragment>
              ))
            : null}
        </div>
        );
    }
}

and here is my data.json

    [
  {
    "id": 1,
    "fullname": "ABC",
    "skills": [
      { "name": "asp.net mvc" },
      { "name": "css" },
      { "name": "knockout js" },
      { "name": "monitoring" },
      { "name": "ui" },
      { "name": "ajax" },
      { "name": "code review" },
      { "name": "design pattern" },
      { "name": "entity from work" },
      { "name": "git" },
      { "name": "ioc" },
      { "name": "jquery" },
      { "name": "json" }
    ]
  },

  {
    "id": 2,
    "fullname": "edf",
    "skills": [
      { "name": "core java" },
      { "name": "oracle" },
      { "name": "asp.net" },
      { "name": "web api" },
      { "name": "artificial in.." },
      { "name": "c#" },
      { "name": "software eng.." }
    ]
  }
]

Answer 2

Please have a look as below:

import profiles from "./data.json";

export default class Skills extends React.Component {
  renderSkills = () => {
    if (getSkills.length > 0) {
      return getSkills.map(items => items.skills.map((subItems, index) => <li key={index}>{subItems.name}</li>));
    }
    return <li />;
  };
    render(){
        return(
          <div>
            <ul>
              {this.renderSkills()}
            </ul>
          </div>
        );
    }
}

Answer 3

Skills Array is nested within profile object in profiles array. Thus you will need to iterate through profiles first.

export default class Skills extends React.Component {
  render(){
    return(
      <div>
        <ul>
          {
            profiles.flatMap((profile, pIndex) =>
              profile.skills.map((skillDetail,i) => {
                return (
                    <li key={pIndex + '-' + i}>
                      {skillDetail.name}
                    </li>
                );
              })
            )
          }
        </ul>
      </div>
    );
  }
}