TypeError: Cannot read property 'map' of undefined 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

akhtarvahid · Accepted Answer · 2020-07-29 04:04:11Z

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'));

answered Jul 29, 2020 at 4:04

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

akhtarvahid Over a year ago

@pus if answer is helpful for you please accept/vote for this. Happy coding!

Asutosh · Accepted Answer · 2020-07-29 03:51:58Z

0

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

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

answered Jul 29, 2020 at 3:51

Asutosh

1,8382 gold badges16 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related