Calling a function inside render function - ReactJS?

Question

Ok so I am making a "buzzfeed" quiz generator and I am having an issue with a piece of my form. So for each question made there are two different parts, a "Question" and the "Answers". There will always be 4 answers but I want to keep track of which Answers are checked later so I would like to give each answer a unique id "question" + questionNum + "Answer" + answerNum or "question" + questionNum + "Answer" + i So I made this answersGenerator function that is supposed to give me 4 unique answer choice fill ins for the user to input answers for that specific questions (right now it says something about terms and conditions - ignore that I ad just left it like that for now because I was following a tutorial). Here is all my code:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';

var questionNum = 1;
var answerNum = 1;

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      quizTitle: "",
      author: "",
      question: "",
      terms: false,
      test: "",
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      
        
          
            
            Welcome to React
          
          
            To get started, edit src/App.js and save to reload.
          
        

        
          
            
              
                
                  Give your quiz a title.
                  
                    
                  
                

                
                  Who's the Author?
                  
                    
                  
                

                
                  
                    
                      Question {questionNum}
                      
                        
                      
                    

                    
                    Answers
                      
                        
                          
                              {this.answersGenerator()}
                          
                        
                      
                    

                
              
              
                  
                    
                    
                  
              
              
          

            
                              
                  Quiz Title: {this.state.quizTitle}
                  Author: {this.state.author}
                  Question: {this.state.question}
                  Terms and Condition: {this.state.terms}
                  Do you test?: {this.state.test}
                
              
            
          
        
      
    );
  }
}

function answersGenerator () {

  console.log("hello this is answer generator");
  var div = document.createElement('div');
  div.className = 'answers' + {questionNum};

  for (var i = 1; i < 5; i++){

    div.innerHTML = 
      '\
      \
        \
        Answers\
            \
            I agree to the{" "}\
            terms and conditions\
        \
      ';
    document.getElementsByClassName('answersDiv')[0].appendChild(div)
  }
}


function addQuestion () {
  questionNum++;
  console.log(questionNum + "that is the question number");

  var div = document.createElement('div');

    div.className = "questions" + questionNum;

    div.innerHTML =
        '\
        Question '+{questionNum}+'
\
        
\
        Answers
\
        Check the box(es) for the correct answer(s).
\
        \
        
\
        \
        
\
        \
        
\
        \
        
\
        ';

      document.getElementsByClassName('questions')[0].appendChild(div)


}


export default App;

There's a few things to just ignore in here, i just wasn't sure how much info you needed. So the issue is that I get an error when I call my answersGenerator function in my render function. Here's the error Uncaught TypeError: this.answersGenerator is not a function Here's the small piece where that is

            
            Answers
              
                
                  
                      {this.answersGenerator()}

I appreciate the help, if you have any other tips for me other than this issue I am having I am all ears. I am very new at this, being js and React.

UPDATE: I have edited the answersDiv to be just this (I relized it was being called inside a checkbox)

        
        Answers

                  {answersGenerator()}

I am still getting the same errors though.

reisdev · Accepted Answer

You're receiving the error because the answersGenerator() isn't a method of your class App, so, you can't refer to it using this. If you want to do on that way, move you function to inside the component, like this:

class App extends Component {
    // your component definition etc..
    answersGenerator = () => {
        // your function implementation
    }
    // the rest of your component
}

TIP:

If you dont want to have to always bind the function, like:

this.handleChange = this.handleChange.bind(this);

Declare your method like:

handleChange = (event) => { // the implementation }

Instead of

handleChange(event) { // the implementation }

The () => {}, known as arrow function, does the bind for your.

EDIT

You're developing with React, that supports creating HTML inside your code. So, you can create an array of answers, then, return a div with the answers mapped inside. The map will take each answer and render inside the div. Try to define your method as below:

answersGenerator => () {
    console.log("hello this is answer generator");
    var answers = []
    for (var i = 1; i < 5; i++){
      answers.push(
        
          
            
               Answers
               
               I agree to the{" "}
               terms and conditions
           
         
       );
    } 
    return  {answers.map(answer => answer)} 
}

Calling a function inside render function - ReactJS?

Answers (2)

Related Questions