Ошибка типа: не удается прочитать свойство ‘ImageUrl’ неопределенного значения в React

#reactjs #ecmascript-6

#reactjs #ecmascript-6

Вопрос:

Я пишу программу, в которой список элементов в массиве через state передается из компонента приложения в компонент QuizApp, а из этого — в компонент Turn. Я предполагаю, что проблема в том, что компонент Turn не может прочитать реквизиты, которые передаются из компонента AuthorsQuiz.

Я попытался преобразовать объект состояния в массив, но он по-прежнему выдает ту же ошибку:

 TypeError: Cannot read property 'imageUrl' of undefined
  

App.js

 import React, { Component } from 'react';
import AuthorsQuiz from './Components/AuthorsQuiz';
import './App.css';
import {shuffle,sample} from 'underscore';

const authors =[
    {
    name: 'Mark Twain',
    imageUrl:'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIALoAiwMBIgACEQEDEQH/xAAcAAAABwEBAAAAAAAAAAAAAAAAAgMEBQYHAQj/xAA5EAACAQMDAwIEBQMBCAMAAAABAgMABBEFEiEGMUFRYQcTIjIUcYGRwSNCsVIVU2Jyc5Kh8CQ1Q//EABgBAQEBAQEAAAAAAAAAAAAAAAABAgME/8QAGxEBAQADAQEBAAAAAAAAAAAAAAECESExURL/2gAMAwEAAhEDEQA/AMOoUKFAKA5oUZao6BzxTiNcrSS8HtUxo j3eqyFLSL5rKMtjwPet4wNUhOFzzU3YdO3V qfhgryn/8AMd6u/Snw7aRlnv3Qr/uwc1qGm6NaWKbYIwnoVFa3IjFbb4farNlZbdolwTkc5P8AnmqrfaRcW8rRtC24MRjB8V6k WFHjjtxVf1zQbG/cSXFmrHOWZBtP58U/Uo85/7LuXhMiRO2DyFGeKYGEqxyCMcV6Ei6ZFpKDHKRAhJXj6gD4qjdXdIb72e605lf5h3Mh9fOMcfpxTUozH5ZXvQA5qQntnQnchznvjimxjIPbmpoIBPWuMDS5FFJFTQSANdwaUHPilAvHamhH0KFCuahR070SpPp/S59X1GK0t1YlzyQOAKsDnQ9KutUuPlWdtJO/wDpRc/v6VsfRPRtzpdo7TIsUrkEjPj0qS6Y0ez0G0Wz08CWcDDuPB9zVltLCQkvLO7n0J4rr4hS3thDGqqmB5Ap0GO3saK8wQYx 1ESXcc9qyD7iT5oZBHPNEeUgHAzj0FFV8jJoDsm7JxTCbSkllZiGILBseARUiuTR1yKbGc9T9DQyLJLDHskOSNo4/8AFZprXTV9psEdxLCxSQkBlBI/WvSmA/3c/pUFrWgi GUk2AZ jbwa1Mvo82vYTB9pH1k4Cim1xbywSfLlUoy9wRya1TV/h/e/MMsEchfOS24BR781R pLY28vyZXR54uGZTyR/NXQgEFKc0TPNG3f 5qCPoUKFcVL2aRSS7JmKg QM4rZegtK0nSbY3dldm4eVMEsmCprO9L6XuZtOtNSiia4ilJ3KnBUdqt3T0N3plpLHdIVBPBPj0rtjODUNCit0AO4sWOWbHmrEzxxqMYyao/S08kbBQvB7knuamtT1AR3IRyNqpnvUs6h5ccy 1djyGJXlcU0juEuCCDnIpyI9wCg4X0HmgQmvXM22FC4Hc5wKcx3UWAGVgfIxmjxwIgwFFH Sp/tqA8Mu7kDinGQaRRdo4rhYqagXHejEAjmkEfI4pRXyMrzRUPr n3V1aSJaSkSEfa3Y1ifWumzwXmbmxFsSuTtGRn1zXoMnefeorVtEtdYheC9hVg3ZvIrUyR5iubdokWQEMjcZBpvtB8j96n qNLbSdSurQ52o5Cn1Hg1XzwatDShQoVxVduiusm0Kya0uMyW7N9KqPqQnz VWeS4bV0 fDcCSI84IKmqd0JpL3l40z4WBBhicHNaZFEG UsEaiLaAGA7 ld8fAvpN mm2yNcsFJxhQeTVd1DqN73qCSKInGNoFSWsWO0x/OmCoZArMR2NRln0pPFdw6kodpGcpMhbOzvz Xbn3qovugFmgRmBzjuKsEQJAJqJ0i3aBEV84wPNTcSjsKxRzzSi5ouBnjFKqKyAKJJSpHFJvzQIJJtk2 acj6WyOx8UxuXEcitx4Bp8pDRggjtmrQYDDZruA1JCZOzH9KMCPFQUH4ndKw3 ny6jbp/8uIZwDjcKwh12MVKkEHsRXpvq6QwaHcSiP5gVcsK8yXbF7qVyCdzE9q1vgYV2uUK5K1Dp1rA6DCNMYKzJ/VXd9Qfzkec1d7KdGtBECBIkYY4HjFYbod8LR2VmxuIwTnv lXY62LBlInU5URrg13xu4EettadIwsZy8cpQgnt71J6N8QrPTLW2WdWyYxxGNwx6HnjzWca3ftfXju3GGPGaaW8Us8oSFSz AO9ZuXdD0dp/Vel6jbiaK9jRcZxIMGlIerdMe4 VHeQsfG1xzWfdKdFak7R3E ot8h4yrxOrBlz5GG4PvQ1Toy8j16xRrkSrJMAWCkEJkdz5rWkaXqGrDT5BcMjNE6KQRyM aibzr22hjX5CMzMecDIX86s15ZRPp4txHuRR9Kn2rPtZ6YmmeNFlYoZNxVRjC/pUmhYtH6skvJNj43DwOx/arLbX0VwMAjd7Vlen9E61aTvLBfqIt2UUFi544B5xgd/5q59O6ffwkfj0/qjuR9rD19qWQL9VySwRJLGTtBwcf5qJ6d6nlkj TOftbaKsuvIJdOlGMlRu9 KzGFybqaWJSkYO5R7 1XGcGmfiN5BBGakIGwmS2c1UNNuvxKR5JV/81Z42EcX1nA96lgrHxPv1g6Xuldid F2qeTzXnt5W3HazAeBmtC L2sC71OK0t5cxRg7gD3OazjNZvOAlChQrmoeaO0jMRvYtjt7UShQdJyat3QOlWGqzyRXTukqsNjIcHke9VCp/om7/CdQ27bsKx7epxxWsb0b3punPYwbWuJJUHlsCk7aGDVdWV4boMbOT61XnBx2z tNOotbay0guiFpyuFUeTiqx8Ieobea5vLa4VIrhsN933 p/PNdajXCvA9hTeezinX6hhh9rL3FJalq1np9t865dio/tjQu37DmkRqP0x3USs1pIBlv9PoawHMds8ShGlLD3pUKqR 9HMiuoYHOe1NJHbdt8UDfUpNtvIp8jA96zeKWM6o8MqlFWTYR65q/6iS4AzgE96qPVdj8oRTwoqyPKCCvcgd63BaNK0tYMOGBGOBUZ8QNSk03R5nSQqxGB dIWOv3MFsEa2JZRjcWrLOuOpLzVb14ZiVRG4G6pedFaurmW6maWdy8h7sfNN8GjA0MVhSdChQrAFChQoBUp02gbWbYngK27NRdWfoy3gt9QTUL8g2sYJ2A5LnHatYzo2n8BCmnC5uk3ymMlYyeFHr fas/uejrV9RNzbSSwggsqwnaeO/bt6V3W/iEzqoWPllyN368/wCOKhrW 1rVgH099oRvoLHA5Oef1rsjR jLI2luZL67kubh8bllkLbQOwq5wTxSQbHUbCNu0DxWPaXYdVxNK6RxSBuHHzccegqZ0/X9R0y8EOp2ojh4G9W3BT2/OpYNJs4niT5ZO5Byre1OGUBSfNRGmaxFPDGythX8E/bT57gBC2eKzoMdQZI0d5cBEBYn2FUTTepdP1nXZLdVdII8/Kdj9x/irR1LdBNKvMndmIgj86wq61d4WdLQ/LJOSV8flWvINJ I uR6bp0aae6fNlbHHfFZBcTPPK0krFnY8k0J55Z23yyM7HyxJpKudy2o2aG6uE1zNZ2OUKFCoBQoUKAVNaBfRW5kiuACjdvzPfPtxULQqy6FmBi1i  dFGoAPYjx6VqWg9OwxQoqRrGxTnDGsa0q5EM0TxOVZWBdM8MB/NbDoOrSoiuCJEAByPINdp1Fti0tFCt3bbgkEjNMdd0WO5s3XYM7e5p3Z6xHIWXsQe2aWuLkSxlTwD4qCs6NHtIiiyAGBK44FTVzcbAFH5j3rkaLGpMUZJPpxRYbaSWYfO7/AOKoideWU6FfXLEgiMhc1gbkliTyc969N6vpbahpE9lEVBmQque2cV5y1DT59Pu5rS6jMcsTFWUjGCKzl1Uea5RyvNErmBQoUKgFChQoBQoUKAUKFCgMjbTkd6tXT1/dSTRwJO6J3wGOKquORkVYelYy12D2GK6Yb2NU09CWhVnLMeSQanHBQDHpUHoozcIQcqq1YiN4PpXSoPCW24p9bRDg4yxotjZSzYwuF8k1PW1rHAAVGW9TWLQS0tSmJHHI7DFZz8ZelTe2iazZQ5lg4uAo5Kev6VqNEmhjniaKVQ0bqVYHyKzKPH88e3OBTYitV6  G19pl1NdaRbSXOnsd39MZaL2I8j3rMZ4HQlWGCDg 1WxTahXSMHFcrmBQoU5srG5v50htYmkd2CjaM96BOCCa4kCW8TyP6IuTVs0noS9miFxq0gsbYDJDcsR/FaH03oun9I6dGHRZdQnH1Ptzn29hT2x049QagZbkt Gjb7f7Sa6zGTtGejouN0a7hjdbZB9Jb 73qnXVrm8dYxld AR5rf uZ4oNMTS7UBZp Pp/sUeapul9HLfazbWkIJhiUGZiP8AuP8AFa1LEVuz6SuNT6curq2iLS2zbht7keaL0rCIZT8zlfWvRVtY2tlbiG0t44IVGCqgAU2bR9LZCv8As 12sMHEQ5FZ/UFP6ctHnTfChPocVcLHSUj2tP8AU3 nwKeWVrBaW6wW0SRRKMBVGBTgcUt2oKoAAAAA7ADtRxRM0YVgGrorldFUHqm9Y/DrR o0eWGMWV8eRPEvDn/iXzVyFA1N6Hk7q3pXU mL422ow4Un nMv2SD1B/iq/ivYmraVYaxZvaanaRXMDd0kXOPceh96zW8 B my3MklrqV1DCxysZVW2 2T3p6Mv6F6OuOqL4ZzHZI39WUdz7CtjmtdI6bsFtrC2iT5Y 4Lzn1zTfRVtunNBisoMK4HPqTVQ6q1dym05JY84rrjjpDmC8udb1gRxuTvPB8KvrWhgw6JpRYkKsa/vVb G kMlub64XDydgfC0/60lM8kNhG3c7nA9KXvBWluptQvJLy4 5ySB/pUdhVx H9tPHPezzx7FkCqme5HJqO0XTd0ybFweFFX60hWGPao4xUyoSvkkEL/ACVDMQcD3rkKMsaBhjAAwPFO27UTFYVwssaF3IVQMknxRwQRkdvWuMoZCrDIIwRSEMXyU WjHYD9Kk/b VAv3owoq8CuioDV0EE4yM lcFcaGNyN6g /Y0CwFCgoCjA7UKgAoED0FdoUGOdQ6ikk2yNQpXuTVWsLV9b1pYu6KwZjjOBT7WyfxE/61IfDBVLzkgE7xzivQjTbKGOwsB2UIv7VVYl/F38tweSzHHsPFWPqDjR3x5AqB0T7j/zCsT6J3TUWC hh7MwJ/YVZF4FV62/ /h/6D/xViHas1RTSdKntSTd6yATxXFGa4/YfnSidqoGKAro7Vw1AYUYd6KtGoD5oUUd3/Ou1NDpOBSRZs8Cjv9h/Kir9oqj/2Q==',
    imageSource:'Wikimedia Commons',
    books: ['The Adventures of Huckleberry Finn']
    },
    {
    name: 'Joseph Conrad',
    imageUrl:'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIALoAiwMBIgACEQEDEQH/xAAcAAACAwEBAQEAAAAAAAAAAAAEBQIDBgcBAAj/xAA8EAACAQMCAwUGBQMDBAMBAAABAgMABBESIQUxQQYTIlFhMnGBkbHwBxShwdEjQuEzUvEVJGJyNDWDF//EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDLglUUId8ZJ8hmmVtCwwxYAdcj16fWqYYAVjVfEoy2rpz3FMVjjkhXBO/sk8gaAyKcd2qjSCAdwNqLtZh/U7zZRkH09fjQNtAUXTpB1HIYfSvpIi1w2F0oW3HPB99B7fzKZNIGrJ6c18qrjIkYjRuCCNPWvJFkOo7HUPAV5nfnXkrrwu0kubpjpTJUA5zy2oHPBytsyMNQDZJA6beVOZyJrQErqjHiU4643rjn/wDQeLWkrIkdu8atjDJ 9DX3bjtFe2/dtcd1GTyijA9cUHUxcsuWCqqDlgfrmqbu7hAOmaP2vEA3y2rjh4hxS5cLJdXD6FOMOds1dHw29ys8bSHXjW2SDy60HVLaVLmFmiYmFiME4zVLqo1K3Nf7unxrndtacdsHcW1zMoJDbcmyOopzZ8Y45bSqHszcRMwDsBqLeo XKgfTa4JdRUBlJOR1J xUvzXeR8 e7Y884qi5vY7kB1wVJweeTnoff 1G8Oij7piBhgp289 f35UFVjLoHjB0qRqXlk vyqT3JEqKmBGOp5rg9DVsdpLMZHjUKrjJHUdN/hXiwtG0qvFrzvnHL1oGcEqzhYm9r0G P5q0QgbHG1ecOtBlQigA4b39d6Zqxx4FwvTxUGOtYhLbju1JxsRnGPd76lkQFh3bBcDYjJqiCdo2yAFAx03x/NHysZbZdQ0yHcHnsBy9KD62mRSAuAqtg6vX7xV6XEaS6VOVLZJzyPlQqKktq5lTB/t09P4r6G1aKUKy4Ub8vMbfzQEAJqOdQ1HIIO4NIO13EreOBbXWdZUFUI5ZGM024jLHw2yluZSCkZGQNsk8hWbtbI3k7Xt6mtmGrx8sHkPdQZMcOkmlJWMnLAbggH1xWo4L2WmuGHexya9iAV2xnY1s C8CttEUuoalTBGMlq1dlaQ2yr3PUe0RQZjh/YyEQaXjCs3Nt8860idmLNbZohjxc9udNg65AG5G Kuhkzg4zg4zQJE7M2zbSqDgeHHPNZfifFG4PJ WFv3Jj3yFBXPkc7jnzrpSK58W4xzrFfiDYJNGjq2mZdR9n29thQYDi3EGvbpBAYhNpJUxY8WMcx86f8IuTPbHUEjnRgJFPIt6HqKy9paBZB38YxrLd4DjRg9MeWTt1zWj4fC8t2kQ8IkXwluuD4SfIb0DqFGCNnDEbELzojuVwNQ/tAOOp8vdULS2aEFjgLnJ9d6LiGmIgAM3PJHLb c0A9sxjlGNhuCOeDj KNZ4MnBwOg00v0kOZFzu2GJ6DaixIigKGIxttQZLRIZGAGhsDYLkhaOtLaQ4Rjh1Od8bivEII/rk6jyIxuBmiolVYwRgAbZ5ZOaCoR NRnSCfECDzo7wqjKxGcaVznflj79DS8z5Ys 2kkZPX75VYXluJd1Ug5LNnORnmf1 dBku3nERJeW/D12VVEsgAODk7Z VGcNulSGPVGWIzqPpjHlWeln/AOqcdnuZEzC0mFXOMAZAFa1bKCK1DCRgdww2znbPyoGvDOKIZRBnuwG8RP36VpbR3lj2jHiOQw8sVj4rMSNKwDiUNlGBx8PvzrTcPdoMglgi81zy9aBzAMqTsFI2JFH26nugWUDHQClNnOGnUH2MMNvKmAnAcxY9nGM0BoOkas6hsaynbuITRnBIJTGx3z6VpFuYxGxKnOcYz50i7Q2sl0mqBA nBx5nrQc3voXi1I2zYywHIHpv986 4XxST8pouh/3EXhIG tT50x444C6XVdMiEBzyz1Hp5/A1m42lW9OllJZDH4RjUcZ FB0XhN0brh8Tkhnz59KtnuY0RxyG2P5pB2CkeYyQMPGgzjG Mn/ABTu9to5TJpJwASFPuoLkKSh/Eo2yQeefvagpHk7xsRIRk76alEmnIchGY7GvGKajhmG/WgXIjtGqNJjcMD6gdasiy0hBUFQNWM7e/FWFZFBMapg7nIwc VepnDSSj2V5DyoKrxdabZUMwx9/fOs12j7QJw60/JQHE0y4dg26Kdh8a0Vwqy4K6yFbfbOdhWc7acIhMA4lLG7OhCvpORjzNBlbS8WF1aYDAX2VA6cq1ltxWA22rvFMffE8hvtuP1rCzmFizLy04Ycsn9q0HD AX3EOAiVICFDiRGC 0Mf80G5s K8NtreO4eUZKhcnyxtmnPDOL8MvWSOC4UNLgEBunlXCJ4374xvNtkenTyrQ8J7I8YlaG5snKy41RknAbGds/MUHelgkjOqL2GO4Ybiot3qksdJ6LjrWW4L2m4gssVpxqD8vLHgsx2D/wCa1Yd2CtCV0H 7nsP aAMzExss3gcNnBPPrRsEqS6TyDZVs9GH/NUrZxTSAuSWVv7vnVBjXhsqRoW7qUNrBOenT1oBuLdn0vXcoulzuQoGkgfvWdvuyzR2zAImFJYMvvG/y ta7hE7PLoUupC6dzzHSmPF7iOGAReEFhybqKDmvZuxls N3biXTEgA0jkR0/mn82UZzuScNjyoLhmIpJ38BDSBR1GBnNMLgI9qwQkEjbzoBgXLlWxpDHJJ f1qxVXTvj5UIfC/jGF58uXpUzPHnxJk9SKCiJgGyTjB3B6c6re4KFggyTzXPMYqR5f1Dpxvjnz6V4iAnUPDpB5ig8iVxIhyurBJOeZoXtXIYey99qk7oMmkAHc5IyKPCBIGAxqAJLD6Uh7bwyz8GnWIFhHokbPLbB/SgwnAOF/9V4rBZgnS28g8h1/iv0RFwhLfs8tjDEEUpgKCPDkVzD8FuFiW/nuZYypOyMx6CuwXkptXDuyrEcA6uQoPzf2p7PzWXaKWxWI62XvE9QR/itJ2E4lx7hx/KtbfmLFPZilyCBsfC3T0rVfiXwg3t1Z8QthpuosqDq2ZelA8E4zNbBYL DTIvmeXkaDVXKpxPhqNe2M0TvgkMAdJ2wdvfR3AkMMfdszlVHsMd19Ko4ddxXSRuMnYjA8uf7UZbpHFOdAIBGdhzzzoGUcShyygHO eg9K9ntlmCYVScHIx6UG93Dbx BixONgM9f8ANMeGzmRFml8I8qBdaWcaPHJIAiIBlhtnp/NHXNvbO/fCAXM6p4ULbAUJ2kUz8Lb8u mYsFjI6HSSPpSnsRxq/vLBbbi1v3M8GpZJCMZx1NAr4hJBIq3FpbC2Nxq7yLmVdWKnHocCvlbQME79fSveJv3947xHRCW8AxyGc/OqXYSp3SHxMN/l9mgtIjli8ClZMcm5HGBQ67DCvt02Ne3jNbprQA4ABBO5FCtJOrEADHTfFBJAufFuRv8AHyq9lVsNgpgbe/B5VHBlAKHbOMCrQCCO99pcnI8/OghGVWMoPFzJbHlQ/FFL8JvjGmthC FZdm2ohYUWMEnKjOrVviqbjivD7OGVpLiMpp8S8zy3wKCX4U31uokLjQVAG/IfeK6BJPw7isEsIuIZAVw2GB6f5rhfALTiE9zdi1m7iOcMUDr4SpOfpWp4FwaGO8We5DFx4taMV2A3Gx5b7UFtnxMW3F7zs/xJmliTV Ukk5lDyX4URxrhUTWSz28cbKq4xncbc6O4vwGy4tD3tqwF5Hho2A5NggA1d2eQ3dj XuCRKo0yRsOZx5 /egXcI/oMqCTOG1ZJ2xjkfpWiV 9fu0JBGQB/tz9etI5rK4sr1oUcshyoJ /StVYxBYEIQasbsebfzQEWNjFHEE0q2AMk  rrpUgs5ZsBCNwPM0VbhVXZBnP6VmvxGa fhFtBwsDvDcLI  DoU5oCLEPJcwQt3oUgPKpXJB6DNQ43eQ65bC1RE5mRk3J9CanccbFpbxJJFou50LDB6 dIQh1asjBOSx65xQVXSIEAALasBcH7618Lb rrVgF6gdPvFETQiRdWQGQ9D0xVEAcuwc41BWxnGdjz FBG7WOZgrJhgAck7bUruA5mYmTHpjlTVnGpQwwcY1 6hWjUsT3cbZ6nrQWxo8bhFOSRhT/irWXrHpHmCd96nJE6sqAYCrlcrzOc8/1qm6mtrPR auo4wPXkcZxQRMQSUMrHSy MNjqP8UmvezVtdnvZCyFySy4G56ffpVd92w4bFLlNcrnfTGvUjzpLffiBK8ZW1tVXSw3Y7/fOg84Vx fhd2Uu4JLmJV7qNsbLpbA HKnEXHYUheSWLQ05C4VCNK Z8/Kh CRCWFJS2Y7k6iPLf6nNauGyksI1t  EsRQvh1ycDbr7/wBKBRNxyGzOI8wo4jDkHcdAcj1q/g/FLueeG5jXwZCkZAzuRuffRp4NacTQrJBbr5kLv94oDs3YLwO NncHvLdiGGd8Zbn6daDc3VvJJC0zrGH2YA74PL50ygtxoXcYx 9UZ1ROFwTp/ejYWZlORhR05UF FjzkHTzJ9aq7pbuXVpBPLceyKERLm/uFaHItkJ8TjZqdW8UcEYUDAHMnr60HNPxOult NWsMGlRbW c56kk/oN/jVHCbiK/t0mj2dQS6Hp6fvSXtVex8T4pczh/9VyyHn4RsP0oLhF3PwyeTSgeLHjB6Y6 /JxQa95u6B1qPTzOKokbvSSoyQN/IbVRZ8YsrltHed0zbEPvjf7FXyQhn1xuoBO OvPegmZlZP9PwgYG/Oq2KajiOT4Dar0gUxhFxtkZPuqppZ4zoChcdPKg5ZedouKXeoTXTk5zgHSMeW1As8hjBLsx22Y tR7sN4B7fNznbGa wpkQatgpG9BZ3QR3ZvZK5BDDlj/H60PI6goMaG1Yzj1xVyJuVY6gcFdXkBtmqXMYchsafd9PfQdF7J8Ou4YopJB4AoMSgcuRz8NvnWwgsZLmNZbjKzd0qhRvkDOT8yaj2FJveBWMzYafQWIzkenyGPnT1Y2ivE0IWTuQrFts7k5/U0Cq04VIsrRMxVyCQfMDBombhqNFEwVEdxjWvM56 /rR95I4haVF1S4UDVsdyP5q 1sriWIQXHhxjH77/AKUAsBkFwtvEiyMEI8B5CtLBbIqATAM3Mg8q s7OK1QLEu5HiYjc0RI8cUZkldURRksxwAKD0acgYGBsKy3b3tHb8F4YbXvP 8u1KIo30jG7H4bD1Ipf2m7dLBqtuCqGlOzXDjwr6qOtcwmmnv8Ai73N3O8siruWOdTevu5/GgIlK4L6V1A4IHlnp8KuhZi7Mw2ZcnpqNUMYkHMsdO2r2fdVmSZSCBpyCR5DagDdFSXXs5QhgvQ7n9qNtuIyWzuYZCFOMgjYgioXa90quVABzy68/wBxQPdaHBBDZOdPXFBqLDtAqvpvEw3Iug25fvTL81bSeNZkYNuGJG9YcyYSR1AOokjPTJ3/AGohbaJ1DtzIycUGMBWJQpAVWAG3U1SuNQyScnB9KlHAC Bk6RqGBRfdjAKH mfPb3/KgGmDspCkHwggH arMUjKdQB052/2jY0QIGKoXOnAA267V8/g3K4JOxHX7FBpeAdtr3gfCXs4YYyVcsh08gcbevpUbr8R NX8kRj0QFfaZdyx686X9kOEHjvaC1sHz3TFncjoqjr g NMO2nYqXg07SpEWgJJBAPL7zQPOAcY4hxOMy3k7tKHUuvs5wM7fACu32xSeGKZDs6Bgc1 ZeBX1xazq0dw pfCVG429K6pwvtNf2nCUhmfuYhGQGePLIP9w896DVdpO11lwUtbRYuL7G0QOw26 vpWJ49xu64pbx5mIkVsGNhhT7hSm5gvY5JLwRST2zED8y6kCQnHX51EnHeTM3XVtuPhQD3LLFH3jkyuEwW6UosJcwtKdmlbO331xTDiUyRQ4fWRJjIUDfel0aBWUA JcezyG3KgM1K7MLgEkjUCud6JGVYopJAI2P8AcKEURpMyPug3xzztU3lNs7Ao04cEKBuQfX3c6AuXGpA/iKkYxyx5UsfXHI7sAjZ0hj5cv0zUo755VMZPhIbdRk5zVBcybOzYUgbnntj9edBeNPdaSzHckHTyOKtEjqAEnCqBsuBtUQf6aNgsCTt1Axz/AEqli8h1mJjnrQZ 2jLJpck5wOex23NekuZEjVCRpxy /P8ASjEKIwxokXbkPoPSpqqGdTF3mrIIyfOgqjgEMRade8UHIBO/LGaVO69 xVDz2B6U04vhIcRNpAbOg8uXSlTICEO66vEcUHTPwK4V3vEeJ8SlUMIUWFCfNjqP0Fbn8SSIuzcoZR/UZVyem9KfwKtwnZi8nx45b1ifgiijfxecHs4kQOXkm8IA54yaDi/CEe54tEkCJ/Vk0sxHLpmux9n z8nFZ2k4oFXh9mwWNQc98RjOT5DH1rmfZ2yezf8AOXLiESIRGpX2icbj3V1Dj/FYLHhS8D4XIXSOMCaVTuc Ij47k /FAo7bcf8A oXQsrQ6LCAYGBgM3n7hyrMXUp7mPopG4XkTmrrn2CkmoKFwBz6UHdKfyxOTgkYA2xvn9aBfc3J79NTlMEYKkHGOVFwBzbh8Z1Nvk76qWMB Z1oS0SbsOpOefx2o61jzpAchmOxJ29/x5UE3dJEHdLpCnw7ZBOds1CG4fTh3wUY6dumR 4/WvJ1a3CByYyw8JHu/xVUmmSbPRVz4T8fp tBfcQrJl1UrIWGoKux88ULHssoOAA2wI65NGzXLxBH0qDgCI4z8/vpQoAaZ8LyAzv1xz tBeJgwADlGZME45ZHT3VFsaiTMUJ30jOBU7dGPd6kK4yMk52x9/OvZ0DysyyuAfIE0C5oCsSqg1M39w2yD/wAUZZKADJIoBUY1EdfSpm2Zn7yNvZwraeQ9K8u45PyTJuNWcDy9/r1oM/xTFxKxhY4U4GduXX9KjEn9EDSCwPXyzV/5fW6odTlTz5b9KthtpHbG oE4 PKg7Z EEPddi4Dg5eeVskc/FjP6Vn 33HE4hxhrWA5t GAl2HWQ/wAD6047JcUTh34em4yNUBlQY6tnI tc8a7la3ubVdzcTa2mI9B/igps9F5bcOiYyBUUrudsFs/xTqHSluQW0yKeo86X2cBDrJoJUezjbrimBB3DD3En5UA86f1XOdYwNJx7qXXLFYmLM2oEnzo6Y6l1DOrYZ/8ALbb9qWXx7vw5JPl54oAbWUv48ggnByeXWjrdD3WWbZVAKj0yaX2aGbxA7l8kEYGN6Y920aYdSvUjPy lATNo7iRZcMwPMDcbHl hoARs83exYeJmxvVrrI8eWGMLuPL edWBFSNUP92S65oPZwSZDIA FCxHG4FURQPEzySR5MuPDzx5/tRbwsElVG0DI04GcDO/7CrDEzQapEz3QOMHc o QoBtbZVSpA8h1PIn9qsaHJJETEf 9VmIh1KxnBYk4PTnj6VCSeSN2TcYOMFc0FlmwLFUVcH1ydqD4zeDUkapgKOYzgnHp6mjrUAwMcDIPP4Unvf9Zfv 2gHjkVtIGxIzkdfPHrRdqztKinOFzsOeKBi5LTKw3i381 ooHdpfTRcFl4WXHdGUSnzGNsCvoAoC82z7RPU fyoGw8Vymd905/GjI9mXG2380FsDaFRViV1AyCDz5n9atEvd6iqKwJACnfTkfXrQdr7K/wDutSfmnuP1oCL2eJYw52OQuPOkfFbkXFwgXkhIX164pjKB W5D2v2FJOJADBAwcHl7qAqzeJMGTdS5LLy291GjRK CSzDb1NL7QDu026t 1Exf6n/6fsaA6NIcSTys4jjX50vESzu1wM5fbc8hRN3/APVqfOQ5qNr/AKvxb60HvECYEHJT4WLHkp6D9ap4bdSHS/eIShACHnk53/mruOf/ABm /wC2s/aE6uZ50GlkbL4JVQU58vdUO8Y8tvSiSqmGLIB3HT/xFVnbAHkPpQf/2Q==',
    imageSource:'Wikimedia Commons',
    books: ['Heart of darkness']
    },
    {
    name: 'J K Rowling',
    imageUrl:'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIALoAiwMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAFAQIDBAYABwj/xAA5EAACAQMDAgMFBgUEAwEAAAABAgMABBEFEiExQRMiUQYyYXGBFJGhsdHhByNCwfAVM1LxU2KSNP/EABkBAAMBAQEAAAAAAAAAAAAAAAACAwQBBf/EACERAAICAgMBAAMBAAAAAAAAAAABAhEDIRIxQTIEE1Ei/9oADAMBAAIRAxEAPwD0ilpKWunRa6urqAOpR1rqXFAHVxIHJ4qnqmpW m2/iXDeY 6g6mvPta1u91FmAkaOI9FQ4A tJKSQ0YtnoV1qlpaqTLOgx18wqtZe0WmXdx9nS5QSH3QSMN9a8cvI/DYiW5CEnOcH8apJGIz4i3MYcHI83Wk/Yyn60fQodG91gfkadXg9ne36zLIlzjAGCr4xW/8AZ/2snjCQ6pmQf QDn966si9OPG/DdVwpkMsc8YkhdWQ9CDmpKqSOpaSloAQUtdS0AVa6upaAOpaSlFACiqWralDploZ5jk5wid3Pwq3NKkETyysFRBliewrzW81GXXb6W6kfbaxkpGnrz0/U0k5cUPCPISaWfU5mub05B6L2AqO4gZovMdq9Aqjk0U2RwWwkZQSfcTvVC2tn1BzNM5 z9FH/AJP2rG5muGOzL31pF4vJiVv/AHOTQ2SyZXDMMgH leor0dNLs4yCIE46cdKWS1VwcIoz/wCtCyUP g86sxNZXbGNA6HkgjOB91aW3njuIwI41Vh2X9Kk1fSlSRbmMYbo2B1 dP021QsB0kHut6j0P dq7ysRxcewxoGtSadciNzmFiNwzwfjXoUTrJGrqQVYbgR6V5pe2f8AL3xg7up BrT xWqG4tzYTf7sQJT4r 1Xxz3TM SPqNPXCupauREHU0tIByaXFAFWlrq4UAKKWurjjv0oAyP8Q7947KHT4X2tcnz8/wBI/wA/CsnZzxx7V6InAUdl/eiXt87f6nA7cAxnb9/6fnWXhkaRlCdGbFZMr2asUdGjjaTUrgBgRGOozxj0rQRW FAAHA4wKGaXGIwq9Mda0lqgxWdbZtriil9lPekMBHaipUAcCoZGUKaZxBSAFzFuBU9z3oc0DI 5DtIAYNRyYeY1TcguisMkZX4GuR7OZVojt7oTwb8gdmH/ABPeu0 X7FqcM6ZA3APj0oPHOLTU3tCTsl5X5 tE4SGZU6Mwx9Qat0zGz0oEEZHSloV7M6gNR0pJf6kZo2 anFFa1p2jM1TOHeoJrhkkKhRgVOO9NKKTkoDXUcIK4V1LQAtI/THrSiuPWgDzT JokjvrVyMRmNguO5yMj8ay2liSS4VYU8Rl5xnA tehe3US3tlIpUkpjacd tYjTYJLWwaZVZpDliAOSay5Y7NmGWkFo5tTt3LNHCR6K2a0ukauZ4gssRRwefSvNra/1JpEnleCMsT/ACXQs2B6/tWpt5WVUlOxJEI8REOQM1NwcVZeM1N0bSa5iWPcz7fSs/d68pZora0nkOcbjxn5Cpb6cLHGg6kdqFahdTwiQWkSySohZgz7Qo/PPwri2dekWF1BuDc28sIPRmHFJdSYYOKBWntYRcJaajAyB kgOR91G7mBRHmMYUjOK44uLBTU46Mjrt08d1bS58yE5 IrR6fcieK3lByA4BPxrL 0Nu8koAJBD54Gc1q7HTPselQ U75FLlif6gc8f52p2RSND/DUsI9WiPKJeEr9ea2lY7 HeB/qw7m54 grY1rh8mTJ9HDvS0i96WmEKlOFNpwoAWmt0p1NagATqkMf2KQuoIyG/GstbRRFpo4/dDkLijftdfR2tosRfztztHpWb0qcSHcn9XNZc8tmz8aIbtrCFcuIxuNVdXkG O1T pgWPqPSiMZYxeU8470CYGbUsAltpzn1qPK0auNMsXPlurYtggdaJXOk2l7hpoUYH1FDL7IdGZTkEcUTsJhOgSFyzd0PBrkXQNWVV9ndOgl8VbaLcOnl6Ut4qKmFA9KJ3SGGMM3U/hQaU5cmuttsOKSsF/6el3fRDA3lsA lHNQDwwwwyEMUcxhgMcYqvpllJPMbhGwsZ6jucdKi167EUSq58yI31OD 9Hoj6sI/w2lWaPUXHObgmttWC/hPE6WV5I3RnHB9cVva3Q Tz8n0IO9LSDqaWmEKlOFNpwoAWmSssaM7kBVBJJ7Cn1R1yJ59HvYY5BG8kDqrMcAEj1rjBdnlOp6tJrOqTy7iYw I17be34VZ0lzDHHuyM560C0MmO9ELDcu/zYOenGRWm1pl067gsmI8Ofzwnb0ODxn6dKxPbo3QfGg2tyGTaTiqLRSi78a1crJn6GmK8bwghisjLj61Qjn1JXwJVODwcYpEbIReQNNBd3DeJcPt28YUVZSPZFuTiRDlf70JeXWTEjPIoUk4IHBqXT/t5mLXEw8MDps5  hjSxOKuwrJemaLczH61RRhIT9afeIoYberckCocrCDjr2 ddj2Rm9EEOstayzxFS3gjKKOjFsEn4EYA75zWc1jUJL65jjByx4OOhJ/QcVNd72mL26MzSA8jnjrV/2N9mZ7m/hubpCIVbdz1NPCNszynS2b32JsmstGCOMMzsT/AGrQio4UEabR0qWtiVGJu3Yg70tIO9LXThUHWlpB1paAFoT7S2cmo6bJZI7IZUYAqceYdAfhRaorsKbd9wJwMjHXIrjVoEeInT7i0 0JJG0csB4APJOfWn6pfPfQqLgjemHVxxz0yPnRr2lkmh1CYXEj75PNENvD8Z4I/KslfePHH4jKNpGM54AzWOSpmyO0HdK1Jb62WRSN6nawHYitFBEjsDz5u6mvNdKjubdpbm1cb09 Nj7w9a2 m61EmyO5/kyDna5Az8vWlkjRjlemahLNEjDuWf5sahnwmQuMH0qGPWoGjwGVhiqFzqKE53gA8DmlKUXHdUUMTyBznsKjCEosjZzJ7oPZf3pLKylvHWS6Vo7ZDkRt70h7ZHYfDqamvmO8nHSuXsVq0UPZmOOTVGXcDsQqFI4PavRdMtxb24ULgg1i/ZjTy2pTTHPhYBX5n9638S4UDHFbcXyedme6HilpKWqkjh3paRe9LQBUHWlpBS0ALXcdCOD1rhS0AZD2606Z9DcwKHETqwOMsq5wa81uop0tJRJuCMfDYEcev617bf39naDbdTxqcH XnLN9PSvLL6S6kimVpoUjZ28NEXoMnC1mzLdmjE21RkbCOW3aQKQ25SoA561roIEn0e1aZFbYQrhhmqSab9lk2NgyjzSMP6PVR/ejukQeJHNasMhowy/OoyZqxxrY 20fT2QN9kt89c7BRCztLWFsxQRqfULz99QWiMqeGze7xmnCQxybSevAqLZooMRjKEAVRuot3FXrb3ADTZo8kYFdYvpUtlls2E0JIYHPwPwrSWGv2k0eLmQW8ijzK/T6GgrEKMN0odMpk37BlVzuZe1Ux5XAhmxRkbm21Kyu38O2uo5HxkKp5q2K8xFykUSyQnZKrZyPh3rTaJ7VJOyQ32AzdJug o7fStMMyfZknia6NQvelpkbq6h0YMrAFWHQgjtTjmrkSrQ7Vdas9KX e26Q9I1Pmx6/Cp9Su1sLGa5Ybti VT3PYffXl9/PJdXckty5LEnzZ6kcGpzlxHxw5dmnn9uZGyttp 3niSWTIA gqi2v63crlrvwYWPSKNQflnGfxqpomm/b1nk3bDEA6g4w5BHHP1q74iwkeLECQSxbGQp IrNLI2XUIoq6tGlnBDiaKSeSPe7B9zZOcgn4d/l8aG2/8wvdAhFhIEYxwZM/H061HeTS3927plmkb1934D1NTTx7FhhibMcK8cdXPvH 30pX0UgrdEyQhsADr3PcUT07EN6mCM7G4/GhSi6JCxuAW746UVhsvss8btMzyGNs56UjNKWy4lu8h3qPKxqNrMtewKfXJ VcNVWyt9jKScZqEXE0p 0MxR2HlUf0ikKUwyo2NgjAqXI25PNBVvbpsBlVyOh6Zp5vp5N0aR7cDkg52/OmROVomuJo2kMYBIHvEH8M0MnuQkZhj2mDg5JycdOv38VFJuRvDJyDnP8A3UbKIw3A7ZrtEm7G7E2o8xDDOB8KgWT3imTtPIFK7Z8uCGY5BPQfKn2cKAgYDMDhjnJJ9a6Kwzo vajYx4GyaIZYrgHA Y5FaGP2rjZAXs5Q3cBhislFbs 5YYjK cAKMmrD6QY3KzTmF pjWNiFzz1zVI5JIlKEWaD2okYnTrNGwLm6VXIxnb9fmPurD3Ntu1T7JERwSvIxnkjPwzR/2zvT/rdlAu4/Z08RsHHJPH4CqcNm51qd4dwa3j45A4zniny/QmNf5J7qyuNMUQTJtlAwF/T61np5ZriR4huLSHJ83ugf90X9qdUuNSaDxtjEJsBU8tz1PzobFCsdgePMhOW/L/PgakUXQmmwKXZwPLEuVB7seB/c/Sry2oxgdK7TICLaPrl/5jc9zwPw/OrvC9M0smXxqkMijSFNxHPaljnMkxkbsMVFLuc85ApIxjp0pC6QrwrJIXcZz0p6yBFC46UkkgVDk1VMhc5A47AUHbLbTHGF5Y vaoZ3XaFUAkdfVu TTWkEABbnnr/y FOEKhWl2OoDZz32noKZIyzlbGRxlCZPNvLeYdsfrUU0r3MjbmG0JxkYBIp0s4lxEoPwI4xVsW0VoXa7LBvdwuOB8vr1rogPEOwZZRuJ4xzVu2tmcEgleMs2Ogz XektEaecqq4UthSVznnGT60at0givYrRXYyMT4vxUdj9aYLD3s9o8VjYfbLhd24Z3Hg4PHeqNxNieQfZj7x6AURurlpSIlkJjQ8Lu4x6EUPklhRyrLkg8naDXW/4SX9Zh9aulv8AXbyXftTxcDvwPKMc/D8aKRS25mlm3kRyAKwCZ4Cgfnms4yFzGUwMVfWWIWybWfxXz8e3X4c003bGiqI0IkneZ2OEHGOmfjSBzJJFCrFRK2GYHIxTJyI7ZVGSTnOfvqfTEaS/UhgVjGfv/wANKMaNEBLOgwrHIHpTHgq7FGFjUfCmSD4VJo0RZSkiXHaqz UelXpBgZND7pxnArhRFWYl2xUsGyFfGYtlQeAOnHHNRRKXk3HdtUjJFdcYuSEjB2DjaM9vX1rqRLJLwZCDK3jbWManPnx0JwPxq3cSSkKocsXGFxkkAevrUlrA5lhjjUnxGAXue/QVbs4CbdZGLbQ3AkXpz0B WDTkSKysRDC877RheD3HNU5nkknGzcxLDA5PUn9KtapctM5FuBGrY4U52joR8ql0u33zJ4ke3od2eo4/ShHGFNL0xYLOO4ceCQcjcOfj8qradIJ9UuJnUtGThGx1Ud/zole6gNp8M IkURB3YOd3APHbpQf2cWBGdi7 XIGRgkdK6LsMxxeB5UJkyePLkDr99EY7K3CKHCO2OWIxmoBs3pImVy3lHPp HalbTVuCJZFIdgM5HfFdFZ5tAiyR79y7uhU8Y6VDYxPKPH4KKenXAHU0 y/2j8qsFQLC4wAMSyflQOikSSRjC88EnoaL6DCBE8oXBd8c8/D8h NBAScEkk4WtJoP/wCGz/ztQ hl2HlximMuTSr7xqVetTLFG4jwh VAbg/zME1p7z/aPyrJTdH/AM7iuJbLYlymov0jkhmPMT57jB6VLbpKCS Qx6kip9G51O1B5BlQEevmFH/bri6hI4PnGf8A5/U1VRuLZ6uWWNZ4YHBb9AsTyvOFBLKo8x6A/KrX2l0IigG3JOWfpjHTP31V0tm/0 68x6 tNyftEnPQkD4Uvh4v5ONY80oLwt29p4twXceGpYDLnkD51oY3is4mCDPhgkMV FUrMAAED/j Yp96SInOeShyfvrlmftgeWQBFOMlgXII6dh Zq97NwrcllxvfcSuRjp/hoRcf7BPfy81oPZNjG8vhkr5P6eK7EJFlC3iqkjFQHOATnIyTRmF1aMEzq3XnxP2rO3JLKxYknf1PyorbE AnJ6V1iOz/9k=',
    imageSource:'Wikimedia Commons',
    imageAttribution:'Daniel Ogren',
    books: ['Harry Porter and sorcerers stone']
    },
    {
    name: 'Stephen King',
    imageUrl:'https://vignette.wikia.nocookie.net/stephenking/images/a/a0/Stephen_king-coming-to-boulder.jpg/revision/latest/scale-to-width-down/275?cb=20170530002714',
    imageSource:'Wikimedia Commons',
    imageAttribution:'Pingiun',
    books: ['The shining', 'IT']
    },
    {
    name: 'Charlse Dickens',
    imageUrl:'https://www.biography.com/.image/ar_1:1,c_fill,cs_srgb,g_face,q_auto:good,w_300/MTE5NDg0MDU0OTQ1MDM5ODg3/charles-dickens-9274087-1-402.jpg',
    imageSource:'Wikimedia Commons',
    books: ['David Copperfield', 'A Tale of Two Cities']
    },
    {
    name: 'William Shakespear',
    imageUrl:'http://shakespeare.mit.edu/shake.gif',
    imageSource:'Wikimedia Commons',
    books: ['Hamlet', 'Macbeth', 'Remeo and Juliet']
    }
]


class App extends Component {
    constructor(){
        super();
        this.state=[{
          turnData: '', 
        }]
        this.getTurnData=this.getTurnData.bind(this);
  }

   getTurnData=(authors)=>{
    const allBooks = authors.reduce(function (p,c){
        return p.concat(c.books)
    }, [])
    const fourRandomBooks = shuffle(allBooks).slice(0,4)
    const answer = sample(fourRandomBooks);
    return{
        books: fourRandomBooks,
        author: authors.find((author)=>author.books.some((title)=>title===answer))
    }

  }
  componentDidMount()
  {
  console.log("Inside componentDidMount" this.getTurnData(authors));
  this.setState([{ turnData: this.getTurnData(authors) }]);
  }


  render() {

    return (
      <div className="container-fluid">
       <AuthorsQuiz data={this.state.turnData}/>
      </div>
    )
  }
}


export default App;
  

AuthorsQuiz.js

 import React, { Component } from 'react';

class AuthorsQuiz extends Component {
  render() {
    return (
      <div className="container-fluid">
        <Hero/>
        <Turn books={this.props.data}/>
        <Continue/>
      </div>
    )
  }
}

const Hero=()=>{
    return(
        <div>
             <div className="jumbotron jumbotron-fluid">
        <div className="container">
            <h1 className="display-4">Author Quiz by Smit Sanghvi</h1>
            <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
        </div>
        </div>
        </div>
    );
}
const Books=(props)=>{
    return(
        <div>
            {props.title.name}
        </div>
    );
}
const Turn=(props)=>{
    //console.log(props.books.imageUrl);
    return(
        <div className="row">
            <div className="col-sm-5">
                <img alt="pic" src={props.books.imageUrl}></img>
            </div>
            <div className="col-sm-7">
                {props.books.map(title=>
                    <Books title={title} key={title}/>)}
            </div>
        </div>

    );
}

const Continue=()=>{
    return(
        <div>

        </div>
    );
}

export default AuthorsQuiz;
  

Комментарии:

1. Мы не сможем помочь вам получить «желаемые результаты», если вы не сообщите нам, каковы они… какое поведение вы ищете? Какое поведение вы на самом деле видите? Какие подходы вы уже пробовали? Есть ли какие-либо ошибки консоли?

2. Проверьте ошибку. Я хочу сохранить данные функции в turnData и передать в компонент AuthorsQuiz

3. getTurnData является методом класса — ключевое слово не требуется function

4. @SakoBu изменил его, не выдав ошибку : ./src/App.js Line 52: 'getTurnData' is not defined no-undef

5. Кроме того, class это зарезервированное ключевое слово JS… Вы не можете использовать class в CSS изменение этого на className … как в <div className="...">

Ответ №1:

Ошибка, возникающая в конструкторе из имени вашей функции. Вы должны использовать this.getTurnData вместо getTurnData .

Но я думаю, вам следует установить состояние в componentDidMount конструкторе жизненного цикла mothod вместо этого. Это лучше для стандартов React.

 componentDidMount()
{
  console.log(this.getTurnData(authors));
  this.setState({ turnData: this.getTurnData(authors) });
}


render()
{
  const { turnData } = this.state; // Get turnData from state by destructing technique

  if (!turnData) // Check the state. Because the first render going to be before componentDidMount method.
  {
    return <div>Loading or something like that</div>;
  }

  return (
    <div className="container-fluid">
      <AuthorsQuiz data={turnData}/>
    </div>
  )
}