Hello I'm trying to display the content of an object on my html page using react. I managed to access the frontend property that are in my object array. Now when I try to browse each element of my frontend object array and display the id of each element on my page it displays only the first element which is "HTML". But I want to display all the other id on the page. I don't know what is the problem

The external data

const skills = [
  {
    frontend: [
      {
        id: 'HTML',
        img: './images/skills/html5.svg'
      },
      {
        id: 'CSS',
        img: './images/skills/css3.svg'
      },
      {
        id: 'Javascript',
        img: './images/skills/javascript.svg'
      },
      {
        id: 'Bootstrap',
        img: './images/skills/bootstrap.svg'
      },
      {
        id: 'React JS',
        img: './images/skills/react.svg'
      },
      {
        id: 'Flutter',
        img: './images/skills/flutter.svg'
      },
    ],
    backend: [
      {
        id: 'PHP',
        img: './images/skills/php.svg'
      },
      {
        id: '.NET Core',
        img: './images/skills/net-core.svg'
      },
      {
        id: 'Node JS',
        img: './images/skills/html5.svg'
      },
    ],
    languages: [
      {
        id: 'Java',
        img: './images/skills/java.svg'
      },
      {
        id: 'Python',
        img: './images/skills/python.svg'
      },
      {
        id: 'C#',
        img: './images/skills/csharp.svg'
      },
    ],
  },
];

export default skills;

My home file

import React, { useEffect, useState } from "react";
import "../styles/Home.css";
import Skills from "../data/Skills";

export const Home = () => {
  const [skills, setSkills] = useState([]);


  useEffect(() => {
    setSkills(Skills);
  }, []);

  const frontend = skills.map((element) => {
    return element.frontend;
  });

  console.log(frontend);



  return (
    <div className="home">

      <div className="skills">
        <h1>Skills</h1>

        {frontend.map((item, index) => {
          console.log(index)
          return <ul key={index}>
            <li>{item[index].id}</li>
          </ul>;
        })}
      </div>
    </div>
  );
};

The result is here

CodePudding user response：

If you are already importing data, you don't need to store that into a state,

Try this ,

import React, { useEffect, useState } from "react";
import "./styles.css";
import Skills from "./Skills";

export const Home = () => {
  let frontend = [];
  Skills.forEach((skill) => {
    frontend = [...frontend, ...skill.frontend];
  });
  return (
    <div className="home">
      <div className="skills">
        <h1>Skills</h1>
        {frontend.map((item, index) => {
          return (
            <ul key={item.id}>
              <li>{item.id}</li>
            </ul>
          );
        })}
      </div>
    </div>
  );
};

CodePudding user response：

Try this,

Change data file to

const skills = {
  frontend: [...],
  backend: [...],
  languages: [...],
};

export default skills;

Code

import React, { useEffect, useState } from "react";
import "../styles/Home.css";
import Skills from "../data/Skills";

export const Home = () => {
  return (
    <div className="home">

      <div className="skills">
        <h1>Skills</h1>

        {Skills.frontend.map(item => <ul key={item.id}>
            <li>{item.img}</li>
          </ul>}
      </div>
    </div>
  );
};

Or as I understand what you are trying to do, try this

import React, { useEffect, useState } from "react";
import "../styles/Home.css";
import Skills from "../data/Skills";

export const Home = () => {
  return (
    <div className="home">

      <div className="skills">
        <h1>Skills</h1>

        {Object.keys(Skills).map(skill => <ul key={skill}>
            {Skills[skill].map(item => <li key={item.id}>{item.id}</li>)}
          </ul>}
      </div>
    </div>
  );
};

CodePudding user response：

Your frontend is a nested array with only one item, so the index is always 0. The following is the fixed version.

import React, { useEffect, useState } from "react";
import "../styles/Home.css";
import Skills from "../data/Skills";

export const Home = () => {
  const [skills, setSkills] = useState([]);


  useEffect(() => {
    setSkills(Skills);
  }, []);

  const frontend = skills[0].frontend

  console.log(frontend);



  return (
    <div className="home">

      <div className="skills">
        <h1>Skills</h1>

        {frontend.map((item, index) => {
          console.log(index)
          return <ul key={index}>
            <li>{item.id}</li>
          </ul>;
        })}
      </div>
    </div>
  );
};

CodePudding user response：

It seems your frontend.map((item, index) pointed to nested array, the simplest way was like this if you cannot change your backend result:

frontend[0].map((item, index)