Show first array element - ReactJS

Question

I am developing a Quiz application using React / Typescript for the purpose of study.

I have the state called Quiz, it consists of:

interface QuestionData {
  id: number;
  question: string;
  explanation: string;
  options: OptionsData;
}

I would like to display only the first element of the array on the screen, I know that the way to do this would be:

<p>{quiz[0].question}</p>

But, in this way, I am getting the following error:

TypeError: Cannot read property 'question' of undefined

If I print using console.log (quiz[0].question), I get the desired return. Is there any other way? Or the form I thought was correct isn't it?

Full code below:

interface VideoInfo {
  video_id: number;
}

type OptionsData = any[];

interface QuestionData {
  id: number;
  question: string;
  explanation: string;
  options: OptionsData;
}

const Quiz: React.FC<VideoInfo> = video_id => {
  const [quiz, setQuiz] = useState<QuestionData[]>([]);

  const video = video_id;

  const getQuiz = useCallback(async () => {
    try {
      await api.get(`/quiz/video/${video}`).then(response => {
        setQuiz(response.data);
      });
    } catch (err) {
      alert('error');
    }
  }, [video]);

  useEffect(() => {
    getQuiz();
  }, [getQuiz]);

  return (
    <Container>
      <ol>
        <li>
          <div className="question">
            {/* The error happens here: */}
            <p>{quiz[0].question}</p>
            <div>
              <Button type="button">A</Button>
              <Button type="button">B</Button>
              <Button type="button">C</Button>
              <Button type="button">D</Button>
            </div>
          </div>
        </li>
      </ol>
    </Container>
  );
};

export default Quiz;

Zirek · Accepted Answer · 2021-03-04 12:18:03Z

3

In time when you try to get access to quiz[0] this element does not exists yet. Try to do something like that:

{quiz && quiz[0].question}

OR

{quiz[0]?.question}

That way you check if element exists before you try to get access to it.

answered Mar 4, 2021 at 12:18

Zirek

5634 gold badges12 silver badges23 bronze badges

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

Comments

alisasani · Accepted Answer · 2021-03-04 12:17:17Z

1

try this

        <p>{quiz[0]?.question}</p>

answered Mar 4, 2021 at 12:17

alisasani

3,1311 gold badge10 silver badges19 bronze badges

Comments

Andre Sampaio · Accepted Answer · 2021-03-04 12:21:48Z

0

If you want just the first, you can take it from the array this way:

const [first] = response.data;

You can get other indexes to:

const [first, second] = response.data;

answered Mar 4, 2021 at 12:21

Andre Sampaio

4826 silver badges9 bronze badges

Collectives™ on Stack Overflow

Show first array element - ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related