Задать вопрос
@PurgaBot

Почему не отображается компонент через map()?

Пишу приложение "школьный тест", где будут обычные школьные вопросы из разных школьных предметов. Написал форму вопроса в компонент, но в итоге ничего не отображается. Прошу помощь.
Код index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import store from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App store={store}/>
  </React.StrictMode>
);

Код App.js:
import FientQuest from './FientQuest';

export default function App(props) {
  const questinsArray = props.store.map(store=> (
    <FientQuest 
    qmumb = {store.qmumb}
    quest = {store.quest}
    var1 = {store.var1}
    var2 = {store.var2}
    var3 = {store.var3}
    value1 = {store.value1}
    value2 = {store.value2}
    value3 = {store.value3}
    />));
  return (
      <div>
        <h1>Тест</h1>
        <div className='cont'>
        {questinsArray}
        </div>
      </div> );}

Код store.js:
const store =[
        {
        qmumb:"1",
        quest:" Скольки равна константа g=... используемая в формуле F=mg;",
        var1:"9,8",
        var2:"10,5",
        var3:"6,62",
        value1: "yes",
        value2: "no",
        value3: "no"
        }];

Код FientQuest:
import React from 'react';

export default function FientQuest (props) {
  return (
      <>
        <h4><span>{props.qmumb}</span> {props.quest}</h4>
        <label htmlFor='1'> {props.var1} </label>
        <input type="radio" name="a" id="1" value={props.value1}/>
        <label htmlFor='2'> {props.var2} </label>
        <input type="radio" name="b" id="2" value={props.value1}/>
        <label htmlFor='3'> {props.var3} </label>
        <input type="radio" name="c" id="3" value={props.value1}/>
       </> );}
  • Вопрос задан
  • 235 просмотров
Подписаться 1 Простой 2 комментария
Решения вопроса 1
black1277
@black1277
Вольный стрелок
Добавьте экспорт в файл store
export const store =[
Исправьте импорт в index.js
import {store} from './store';
и добавьте key в App.js когда проходите map-ом
const questinsArray = props.store.map(store=> (
    <FientQuest
      key={store.quest}
      qmumb = {store.qmumb}
      quest = {store.quest}
//...
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы