Блог

У меня есть следующий код: мой код

Мне нужно проверить, превышает ли name.length сумма моих элементов больше 25, тогда отображаются только элементы, name.length сумма которых меньше 25. А также печатать count элементы, которые не отображаются.

Я пытаюсь что-то подобное, но я застрял, пожалуйста, помогите 🙂

     const skills = [
    {
      id: 1,
      name: "Html"
    },
    {
      id: 2,
      name: "css"
    },
    {
      id: 3,
      name: "bootstrap 4"
    },
    {
      id: 4,
      name: "scss"
    },
    {
      id: 5,
      name: "JS"
    },
    {
      id: 6,
      name: "React"
    },
    {
      id: 7,
      name: "Jquery"
    },
    {
      id: 8,
      name: "Vue JS"
     }
     ];
      return (
        <div>
          {skills.map((skill) => (
        <li key={skill.id}>{skill.name}</li>
      ))}
      {/* with this line I am wanting to show each elemet char count  */}
      {skills.map((skill) => (
        <div>{skill.name.length}</div>
      ))}
      {/* need to show hide elements count  */}
      <div> {count}</div>
    </div>
  );
 

В конце концов, мне нужно получить такой вид, как этот

• HTML
• css
• bootstrap 4
• scss
• JS

3

Ну, вы можете подойти к этому как:

 let lengthCount = 0;
let maxIndex = 0;

skills.map((item, index)=>{
 if(lengthCount <= 25 ){
   maxIndex = index;
   console.log("item: " , item.name)
 }
  lengthCount = lengthCount   item.name.length;
})

console.log(" ",skills.length - maxIndex, " more");

 

Результат:

Вот ссылка на codepen https://codepen.io/the_only_yasir/pen/dyOdZZR?editors=0010

Вы можете сделать это следующим образом.

  return (
    <div>
      {skills.map((skill) => {
        if (skill.name.length < 25) {
          return <li key={skill.id}>{skill.name}</li>;
        } else {
          countMoreThan25  ;
        }
      })}
       {countMoreThan25}
    </div>
  );
 

Вот код для справки.
https://codesandbox.io/s/jolly-newton-qjxpw?file=/src/App.js:549-799