mapping elements from array in reactJS

Question

Hi all I have following code: my code

I have following scenario. I am counting all my skill names char length and if that length is greater then 25 I am hiding all rest skills and showing in number how many skills is hided. That part is now working. But when I can't show my visible skills. Can you help me to resolve that problem and optimized my code if you think there is something wrong.

Thank you.

here my skills

    const skills = [
      {
        id: 1,
        name: "Html"
      },
      {
        id: 2,
        name: "css"
      },
 
   ... and so on
];

my code part:

   let lengthCount = 0;
   let maxIndex = 0;
   const skill = [];

   const Skill = () => {
    skills.map((item, index) => {
      if (lengthCount <= 20) {
        maxIndex = index;
        skill.push(item.name); // I am adding items to my skill array
       }
     lengthCount = lengthCount + item.name.length;
    });

    // mapping items from skill array
    let mySkills = skill.map((perSkill) => (
      <span key={perSkill.id} className="element">
        {perSkill.name}
      </span>
     ));
    
    
    return (
      <div className="wrapper">
        <div>{mySkills}</div>+{skills.length - maxIndex - 1}
      </div>
    );

zahra zamani · Accepted Answer · 2021-02-27 13:45:24Z

1

You're pushing item.name in your skill array. So the array will only contain names and not objects. So print perSkill, and not perSkill.name. If you want skill to be an array of objects, then use:

skill.push(item)

edited Feb 27, 2021 at 13:45

zahra zamani

1,38312 silver badges31 bronze badges

answered Feb 27, 2021 at 10:35

Chaitanya Maurya

8311 bronze badges

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

Comments

alisasani · Accepted Answer · 2021-02-27 10:35:48Z

1

You just need to change {perSkill.name} to {perSkill} and it'll work fine

sandbox

answered Feb 27, 2021 at 10:35

alisasani

3,1311 gold badge10 silver badges19 bronze badges

Comments

Nghi Nguyen · Accepted Answer · 2021-02-27 10:30:31Z

0

I use reduce to loop through you skills, and each step we update object { total, list} if the total + new name length > LIMIT_NUMBER we just return the old one. If not we append new item to the object.list and increase the total.

const LIMIT_NUMBER = 5
const skills = [
      {
        id: 1,
        name: "Html"
      },
      {
        id: 2,
        name: "css"
      }]
      
const newSkillList = skills.reduce((acc, curr) => {
   if (acc.total + curr.name.length > LIMIT_NUMBER){
      return acc
   } else{
      const total = acc.total + curr.name.length
      const list = [...acc.list, curr]
      return {list, total}
   }
},{list:[], total: 0})
console.log(newSkillList)

answered Feb 27, 2021 at 10:30

Nghi Nguyen

9586 silver badges11 bronze badges

Collectives™ on Stack Overflow

mapping elements from array in reactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related