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

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 !

Remember, data.results[i] on any given iteration of the outer map is not an array. It is an object (see below for an example). You can only use the map method on an array.

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

Thanks @RandellDawson ! 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,