Creating dynamic buttons

user_4619955 0
Viewed 47

Trying to create a small app as part of a university assignment using React. The basic assignment is to create a page which has a question and then has one of 5 answers. I have the answers now stored in a firestore document.

I have created (the start of) a custom Button component.

So the code I have does contact the firestore and I get the data back. The examples I have tried in uni have been for getting 1 bit of data - not like this. What I'm trying to do is to create an answers "array" which I can then iterate over and create my custom buttons. However, I can't quit figure out how to create the array of answers.

Can anyone give me a hint?

import React, {useEffect, useState} from 'react';
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
import Button from '../components/Button';

function AnswerComponent() {

  const firestore = firebase.firestore();
  //const storage = firebase.storage();
  const collectionId = "Balances";
  const documentId = "Answers"

  const [answers, setAnwsers] = useState([]);

  useEffect(() => {
    const getFirebase = async () => {
      const snapshot = await firestore.collection(collectionId).doc(documentId).get();
      const questionData = snapshot.data();      

      // now we add the answers and correct flag to our answers
      const answerArr = [];
      Object.keys(questionData).forEach(key => {
        answerArr.push(questionData[key]); 
        setAnwsers(answerArr)
      });      
    };
    getFirebase();
  },[answers, firestore])

  console.log(">>", answers)
  
  return (
    <div className="col-12">
      <h3 className="text-center">Answer</h3>
      <div className="p-3 mb-2 bg-light">
      <div className="row">
        
      </div>
        {/* {btns} */}
      </div>
    </div>     
  )
}

export default AnswerComponent;
reactjs javascript
3 Answers

Need to push new answers onto the array, this solution saves each answer as an object with a key (preserving the key).

      const answerArr = [];
      Object.keys(questionData).forEach(key => {
        answerArr.push({ [key]: questionData[key] });
        setAnswers(newAnswerArr);
      });

If you don't need the key you could save a step and use Object.values:

      const answerArr = [];
      Object.values(questionData).forEach(questionValue => {
        answerArr.push(questionValue);
      });
        setAnwsers(answerArr);

Or with either solution you could reduce instead of setting the anwserArr separately:

const answerArr = Object.values(questionData).reduce((acc, questionValue) => {
        acc.push(questionValue)
        return acc;
      }, []);
      setAnswers(answerArr)
user_88211190

It looks like you're trying to setAnswer several times in a row (which will change the answer) when you do this:

Object.keys(questionData).forEach(key => {
    console.log(key, questionData[key]);
    setAnwsers(key, questionData[key])        
  });

Instead, I would try to create a singe array, then setAnswers to that array

const answerArray = []
Object.keys(questionData).forEach(key => {
    console.log(key, questionData[key]);
    answerArray.push(questionData[key]);    
  });
setAnswers(answerArray)
user_140898900

Turns out either piece code works (thanks to both @chris-bradshaw and @radicalturnip. The issue was I forgot useEffect changes on every change. So useEffect was triggered, getting data, that was triggering a change, which ran useEffect, which got more data and triggered another change, etc etc x infinitity.

user_46199550
Related