0

I am new to js and React. I want to print some data from database in html page using javascript and react. I have a simple Flask app which is storing some form questions with possible answers in database. I want to print them dynamically in my React components. Is there any way to create components in loop depending on number of questions? Here is snippet of my Python code:

@app.route('/form.html')
def form():
    form_data = db.get_all_questions()
    return render_template("form.html", data=form_data)

Here is my form.html:

            <div class="questions">
                <div class="question" id="question1">
                </div>
                 <div class="question" id="question2">
                </div>
                <div class="question" id="question3">
                </div>   
            </div>

Here is my js file:

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

  render() {
    return (
      <div>
        <p>{this.props.content}</p>
        <p>{this.props.id}</p>
        <div className="rating_scale">
          <form>
            <label>
              <input type="radio" name="rad" value="1" />
              <span>1</span>
            </label>
            <label>
              <input type="radio" name="rad" value="2" />
              <span>2</span>
            </label>
            <label>
              <input type="radio" name="rad" value="3" />
              <span>3</span>
            </label>
            <label>
              <input type="radio" name="rad" value="4" />
              <span>4</span>
            </label>
            <label>
              <input type="radio" name="rad" value="5" />
              <span>5</span>
            </label>
          </form>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Question content= "question 1" />,
  document.querySelector("#question1")
);
ReactDOM.render(
  <Question content= "question 2" />,
  document.querySelector("#question2")
);
ReactDOM.render(
  <Question content= "question 3" />,
  document.querySelector("#question3")
);

In HTML I can loop throw my questions like so:

{% for question in data %}
            <tr>
                <td>{{ question['question_id'] }}</td>
                <td>{{ question['question_text'] }}</td>
                <br>
                {% for AnswerId, Answer in question['possible_answers'].items()%}
                 <td> {{AnswerId}} : {{Answer}} </td>
                <br>
                {% endfor %}
            </tr>
{% endfor %}

But how to get similar behavior in javascript? I just don't want to hard-code all my question divs, but creating react components which are including this div dynamically depending on number of questions. In content prop I want to display the question text.

p_sumara
  • 1
  • 2
  • You could use map, to create a component for each question. An introduction to this can be found in the [react docs](https://reactjs.org/docs/lists-and-keys.html) – Soenderby May 05 '21 at 11:04
  • Thanks, but how to get access to my data? – p_sumara May 05 '21 at 11:24
  • Just to avoid confusion, first let me ask: What data do you need access to, where is it currently stored, and where does it need to go? – Soenderby May 05 '21 at 11:47
  • Data is stored in database and my flask app has access to it. I can print it in a for loop in html like shown above. Data is just some json. My question is, for example I can create some paragraph in html and put {{data}} between. It can print my whole data, but I want to do something similar in my react component and render it to this html paragraph. So I want to have access to this data in my js file. – p_sumara May 05 '21 at 12:42

2 Answers2

0

I was going to leave a comment, but it was getting long.

From the perspective of the react component, all you need to do to give it access to the data is to pass it as props.

However if you do not already have the data in your react application you first need this. I would suggest you make a route in your flask app that returns this data. See This question for how to go about that.

Then you should be able to make a request from your react app that fetches this data. See the React docs. Then you should be able to map over the elements in the response shown here, and create a component for each question.

Soenderby
  • 157
  • 1
  • 11
0

So the solution was simplest that I thought. I had access to my data in html just typing:

{{data}}

So I created div:

<div id="mydiv" data-questions='{{ data|tojson }}'></div>

And in my javascript file variable:

var guestions = JSON.parse(document.getElementById("mydiv").dataset.questions);

Maybe it is not the best solution, but for now it works fine. Now I have to map over the elements and create a component for each question.

p_sumara
  • 1
  • 2