TypeError：无法读取未定义 Reactjs 的属性“映射”？

Question

TypeError: Cannot read property 'map' of undefined Reactjs?

I am working small quiz module but showing below error please help me for below error TypeError: Cannot read property 'map' of undefined i don't know how to solve i am new for react pease help me for this code

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Questionlist from './quiz/Questionlist.jsx';
import * as serviceWorker from './serviceWorker';

class Quiz extends React.Component {
    constructor(props){
        super(props);
            this.state= {
                questions : [
                    {
                        id: 1,
                        text: 'What is your name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'Michael'
                            },
                            {
                                id: 'b',
                                text: 'Brand'
                            },
                            {
                                id: 'c',
                                text: 'Steven'
                            },
                        ],
                        correct: 'b'
                    },
                    {
                        id: 2,
                        text: 'What is your mother name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'Sara'
                            },
                            {
                                id: 'b',
                                text: 'Denny'
                            },
                            {
                                id: 'c',
                                text: 'senny'
                            },
                        ],
                        correct: 'c'
                    },
                    {
                        id: 3,
                        text: 'What is your father name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'Bobby'
                            },
                            {
                                id: 'b',
                                text: 'Harry'
                            },
                            {
                                id: 'c',
                                text: 'Waye'
                            },
                        ],
                        correct: 'c'
                    },
                    {
                        id: 4,
                        text: 'What is your friend name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'John'
                            },
                            {
                                id: 'b',
                                text: 'Paul'
                            },
                            {
                                id: 'c',
                                text: 'Jose'
                            },
                        ],
                        correct: 'a'
                    },
                ],
                score: 0,
                current: 1
            }
    }

    render() {
        return <h2>I am a Car!</h2>;
    }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
        <Questionlist />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));
serviceWorker.unregister();

Questionlist.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Question from './Question.jsx';

class Questionlist extends React.Component {

    render() {
        return(
            <div className="question">
                {
                    this.props.questions.map(questions => {
                        return <Question questions={questions} key={questions.id} {...this.props}  />
                    })
                }
            </div>
        )
    }
}

export default Questionlist

Question.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Question extends React.Component {

    render() {
        const {question} = this.props;
        return(
            <div className="well">
                <h3>{question.text}</h3>
                <hr />
                <ul className="list-group">
                    {
                        this.props.question.choices.map(choice =>{
                            return(
                                <li className="list-group-item">
                                    {choice.id} <input type="radio" onChange={this.onChange.bind(this)} name={question.id} value={choice.id} /> {choice.text}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default Question

Answer 1

Pass your array to Questionlist component.

Try to remove your Garage component if there is no use because you have array(questions) in Quiz component. pass questions to Questionlist component from Quiz component.

instead of

render() {
    return <h2>I am a Car!</h2>;
    }

pass like this

render() {
    return <Questionlist questions={this.state.questions} />
    }

at the end change root component from Garage to Quiz

ReactDOM.render(<Quiz />, document.getElementById('root'));

Answer 2

To Questionlist your are not passing questions, it should be:

 <Questionlist questions={this.state.questions} />