title: How to display data in a grid manner on React JS?
body: <p>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.<a href="https://i.stack.imgur.com/xdso9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xdso9.png" alt="enter image description here"></a></p>
  
  <pre><code>[
      {
          "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.."}]
  
  
      }
  ]
  
  </code></pre>
  
  <p>and the code is :</p>
  
  <pre><code>
  import profiles from "./data.json";
  
  export default class Skills extends React.Component {
      render(){
          return(
              &lt;div&gt;
              &lt;ul &gt;
                            {
                              profiles.skills.map((skillDetail,i) =&gt; {
                                return (
                                    &lt;li key={i}&gt;
                                      {skillDetail.Name}
                                    &lt;/li&gt;
                                );
                              })
                            }
                          &lt;/ul&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/tdh78.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tdh78.png" alt="enter image description here"></a></p>