@aleshaykovlev
html, css, js, node, webpack, sass, react

Выводится только первый элемент массива, что делать?

Есть массив с описаниями, через функцию, в которой есть цикл for of я перебираю массив и передаю эту функцию в props. Выводится только первое описание, как сделать, чтобы выводились все?

App.js:
import React, { Component } from 'react';
import '../styles/App.sass';
import Head from './Head.jsx';
import Find from './Find.jsx';

// Описания
const allFind = [
    `Here you can find all
    web design and all of yours 
    designing meterials`,

    `Here you can find all  
    your primary health your
    good health and education`,

    `Consistency in packaging
    matter a lot. Give your attention
    match design elements`,

    `It can be understood
    that your fonts, sizes, headings, 
    sub-headings, and button`
]

// Функция для описаний
function findDescription() {
    for (let desc of allFind) {
        return desc;
    }
}

const App = (props) => {
    return (
        <div className="App">
            <Head title={titlesHeader.title} description={titlesHeader.description} />
            <div className="block-info">
                <div className="block-info-title">We provide great Service</div>
                <p className="block-info-desc">
                    The occupational traffic permit is one of the most
                    important things
                    in the company
                </p>
                <p>when carrying out freight transport.  In fact, it is a</p>
                <p>prerequisite for doing business traffic at all.</p>
            </div>
            {/* Вывожу описания */}
            <div className="block-findList">
                <Find img="../src/assets/img/design 1.png" title="Web design" description={findDescription()} />
                <Find img="../src/assets/img/doctor (1) 1.png" title="Health and study" description={findDescription()} />
                <Find img="../src/assets/img/box 1.png" title="Packaging" description={findDescription()} />
                <Find img="../src/assets/img/blog 1.png" title="Content writing" description={findDescription()} />
            </div>
        </div>
    )
}

export default App;


Find.jsx:
import React, { Component } from 'react';

const Find = (props) => {
    return (
        <div className="Find">
                <div className="block-find">
                    <img src={props.img} alt="" />
                    <div className="block-find-title">{props.title}</div>
                    <p className="block-find-description">
                        {props.description} 
                    </p>
                </div>
        </div>
    )
};

export default Find;
  • Вопрос задан
  • 190 просмотров
Решения вопроса 1
origami1024
@origami1024
went out for a night walk
Вместо
description={findDescription()}
используй
description={allFind.shift()}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
28 нояб. 2024, в 13:31
30000 руб./за проект
28 нояб. 2024, в 13:22
1000 руб./за проект
28 нояб. 2024, в 13:00
70000 руб./за проект