Only the first element of the array is displayed, what should I do?

A

Alexey Yakovlev2020-06-01 13:22:00

JavaScript

Alexey Yakovlev, 2020-06-01 13:22:00

There is an array with descriptions, through a function in which there is a for of loop, I iterate over the array and pass this function to props. Only the first description is displayed, how can I make it show all?

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;

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

O

origami1024, 2020-06-01
@aleshaykovlev

Instead
description={findDescription()}
use
description={allFind.shift()}