Как вывести необходимые данные из массива объектов?

@Kha787 · Регистрация: 24.11.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте! Только начал свое знакомство с ReactJS и нужно сделать сайт-тест знаний пользователя по определенной теме.
Есть вот такой state. На данный момент не могу понять, как мне вытащить title определенной секции. А точнее нужно вывести данные о каждой секции в отдельном div. Это так максимально упрощенно, но очень хочу понять и разобраться как же это все работает! Спасибо за помощь!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
    state = {
        courseTitle: "FED testing work",
        courseGoal: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. " +
        "Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.",
        downloadLink: downloadLinkUrl,
        courseTime: "35 min",
        courseInfo: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. " +
        "Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
 
        sections: [{
            id: 1,
            title: "Section 1",
            userProgress: 100,
            questions: [{
                id: "First",
                title: "Multiple choice question 1",
                type: "multipleSelect",
                instructions: "Pls, select the multiple right answers for this question.",
                hasCorrectFeedback: false,
                hasIncorrectFeedback: false,
 
                answers: [{
                    id: "Answer1",
                    text: "Correct answer1",
                    isCorrect: true
                },{
                    id: "Answer2",
                    text: "Incorrect",
                    isCorrect: false
                },{
                    id: "Answer3",
                    text: "Correct answer2",
                    isCorrect: true
                }]
            },{
                id: "Second",
                title: "Single choice question 1",
                type: "multipleSelect",
                instructions: "Pls, select the One right answer for this question.",
                hasCorrectFeedback: false,
                hasIncorrectFeedback: false,
 
                answers: [{
                    id: "Answer1",
                    text: "Correct answer1",
                    isCorrect: true
                },{
                    id: "Answer2",
                    text: "Incorrect answer1",
                    isCorrect: false
                },{
                    id: "Answer3",
                    text: "Incorrect answer2",
                    isCorrect: false
                }]
            },{
                id: "Third",
                title: "Text Matching 1",
                type: "textMatching",
                instructions: "Pls, select the right text matching.",
                hasCorrectFeedback: false,
                hasIncorrectFeedback: false,
 
                answers: [{
                    id: "Answer1",
                    key: "Key Number ONE",
                    value: "Key1"
                },{
                    id: "Answer2",
                    key: "True",
                    value: "True"
                },{
                    id: "Answer3",
                    key: "False",
                    value: "False"
                },{
                    id: "Answer4",
                    key: "Key Number Two",
                    value: "Key2"
                }]
            }]
        },{
            id: 2,
            title: "Section 2",
            userProgress: 45,
            questions: {
                id: "First",
                title: "Single/Radio choice question 1",
                type: "singleSelect",
                instructions: "Pls, select the One right answer for this question.",
                hasCorrectFeedback: false,
                hasIncorrectFeedback: false,
 
                answers: [{
                    id: "Answer1",
                    text: "Correct",
                    isCorrect: true
                },{
                    id: "Answer2",
                    text: "Incorrect answer1",
                    isCorrect: false
                },{
                    id: "Answer3",
                    text: "Incorrect answer2",
                    isCorrect: false
                }]
            }
        }],
    };

@msheal · 20.04.2018, 00:21

Вот так (key опустил для простоты) https://codesandbox.io/s/5343okzqqn

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class App extends Component{
  constructor(props){
    super(props);
 
    this.state = {здесь ваш стейт}
 
  render(){
    return (
      <div>
        {this.state.sections.map(section => <Section title={section.title}/>)}
      </div>
    )
  }
}
 
const Section = ({title}) => <div>{title}</div>

@Kha787 · 20.04.2018, 12:45 **[ТС]**

msheal, Спасибо большое! Как я понимаю с вопросами и ответами по аналогии делать, да?

@msheal · 20.04.2018, 13:14

Kha787, да, по-идее будет аналогично и с вопросами

@Kha787 · 26.04.2018, 18:43 **[ТС]**

msheal, Прошу прощения, не могли бы вы мне помочь немного?

Есть вот такое вот счастье, не могу нормально вывести вопрос, тоесть один вопрос с вариантами ответа на него, а при клике на кнопку переход на след вопрос, state тот же, просто редаксом его в редюсере вписал чтобы удобнее было. Есть идея как сделать адекватно? А то я учусь вот только и уже 2 день на этом завис, совсем ничего не лезет в голову, заболел еще в кучу к этому, на больную голову еще и по работе проект висит (немного в другой сфере) и уже просто закипаю.... Может у вас есть идея какая-нибудь, буду очень благодарен за любой ответ!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
class Tests extends PureComponent {
 
    render(){
 
        const AnswerContent = this.props.sections.map( (section,id) => {
 
            const clicked = (e) => {
                if(this.props.state.currentQuestion !== section.questions.length + 1){
                    e.preventDefault();
                }
                this.setState({
                    currentQuestion: ++this.props.state.currentQuestion
                })
            }
 
            const Quest = section.questions.map( (quest) => {
                const answerType = quest.type === "multipleSelect" ? "checkbox" : "radio" ;
 
                const answerInput = quest.answers.map( (answer) => {
                    return <AnswerOption typeAnswer={answerType} answerText={answer.text}/>
                });
 
                return (
                    <div className={classes.questionsContainer} key={id}>
                        <QuestionsCount counter="1" total={section.questions.length}/>
                        <h1 className={classes.questionHeading}>{quest.title}</h1>
                        <p className={classes.questionInfo}>{quest.instructions}</p>
                        <QuestionsForm clicked={clicked}>
                            {answerInput}
                        </QuestionsForm>
                    </div>
                );
            });
 
            return Quest;
        });
 
 
        return (
            <section className={classes.questionsSection}>
 
                {AnswerContent}
 
                {this.props.showCorrect ? <CorrectAnswer/> : null}
 
                {this.props.showIncorrect ? <InCorrectAnswer/> : null}
 
                <Link to="/"><button className={classes.prevPageButton}><img className={classes.prevPageImg} src={ImgPrevGray} alt="Prev"/></button></Link>
                <a className={classes.prevQuestion}>&larr; Prev</a>
                <a className={classes.nextQuestion}>Next &rarr;</a>
            </section>
        );
    }
}
 
 
const mapStateToProps = state => {
    return {
        state,
        sections: state.sections,
        showCorrect: false,
        showIncorrect: false
    };
};
 
export default connect(mapStateToProps)(Tests);

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Kha787 0 / 0 / 0 Регистрация: 24.11.2015 Сообщений: 30
	20.04.2018, 12:45 [ТС]
	msheal, Спасибо большое! Как я понимаю с вопросами и ответами по аналогии делать, да? 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	20.04.2018, 13:14
	Kha787, да, по-идее будет аналогично и с вопросами 0