[SOLVED]How to call a map function within another map function while working with a react api call

JavaScript
1

So I already posted about my react quiz app I am working on, the thing is I ran into another snag. I am using an api call in a react app to make a randomized quiz application. The problem I have is how to add the answers to the questions. I have already put up the questions no problem, but within the question’s mapping function I expect I need to use another map function to apply the answers. I have tried using another .then() function but it appears that I lose the data of the api call at that point. The app currently doesn’t display the questions until I remove the added map function, I kept it on there to express what I had tried so far. I’m sure it should be a pretty simple fix, I am just quite the newbie at all of this. Thanks for your help.

here is the codepen

Here is the jsx if you just want to see that

var qs;
var answers ; 
let thing; 
class Quiz extends React.Component{
      constructor(props){
        super(props);
      }
      render(){
        return (
            <div className="box">
            <h1 className=" display-3  borderbottom">Quiz app</h1>
            <QuizContent getAs={this.getAs}/>
            </div>
        );
      }
    } 

 class QuizContent extends React.Component {
       constructor(props){
         super(props);

         this.state = {
           questions: [],
           answers: [],
           possible_answers: []
         };

       }
       componentDidMount(){
       fetch('https://opentdb.com/api.php?amount=10&category=12').then(results => {return results.json();})
         .then(data =>{ 
        
          let qs = data.results.map((item, i)=>{ 
            const entities = {

                  '&#039;': "'",
                  '&quot;': '"',
                  "&ntilde;": "ñ",
                  "&eacute;": "é",
                  "&amp;": "&" ,
                  "&uuml;": "ü"
         }
            return (
                <div>
                  <div key= {data.results[i]}>{data.results[i].question.replace(/&#?\w+;/g, match => entities[match])}
                    <br />
                    <br /> 
                    <div> {data.results[i].incorrect_answers.map((item,j)=> {
                      return (
                       <p>{data.results[j].incorrect_answers; }  </p>
                      )
                    })} </div>
                  <br />
               </div>
            </div>
              )
            })
     

            this.setState({
                questions: qs,

              })
           })

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

             )
           }
         }




ReactDOM.render(<Quiz />, document.getElementById("app")
);

I just have the code to map the incorrect answers, I was going to code the correct answers afterwards and stylize the inputs. Thanks again !

3

If you can still not figure out how to make it work, see below:

        let qs = data.results.map((item, i) => {
          const entities = {
            "&#039;": "'",
            "&quot;": '"',
            "&ntilde;": "ñ",
            "&eacute;": "é",
            "&amp;": "&",
            "&uuml;": "ü"
          };
          const pItems = data.results[i].incorrect_answers.map((item, j) => <p key={j}>{item}</p>);
          // Correct! Key should be specified inside the array.
          return (
            <div key={i.toString()}>
              <div>
                {data.results[i].question.replace(/&#?\w+;/g, match => entities[match])}
                <br />
                <br />
                <div>
                  {pItems}
                </div>
                <br />
              </div>
            </div>
          );
        });

I suggest changing the p selector’s color property from white to red, so you can actually see the incorrect answers displayed.

1 Like
4

Thanks @camperextraordinaire ! You really helped out. I feel foolish for not changing the color of the p elements. I feel I may have even gotten the answer at one point but I couldn’t see the letters because of the colors lol. Ether way, thank you. I love this forum,