How to append a dynamic HTML element to React component using JSX?

Question

I'm new to Reactjs. I'm creating an App with a Survey creation like Google Forms. My component has a button to create a new Div with some HTML elements to create a survey question. To do that, on the button click function, I'm creating a JSX element and push it to an array. And then, I set the array inside the render function to display what inside it.

The problem is, Even though the Array is updating, the dynamic HTML part can not be seen on the page. The page is just empty except the button. How can I fix this?

Component:

import '../../styles/css/surveycreation.css';
import React, { Component } from 'react';

let questionId = 0;

class SurveyCreation extends Component {
    constructor(props) {
        super(props);
        this.questionsList = [];
        this.state = {

        }
    }

    addQuestion = (e) => {
        e.preventDefault();

        questionId = questionId + 1;

        this.questionsList.push(
            <div key={questionId}>
                question block
            </div>
        )
    }

    render() {

        return (
            <div>
                <button onClick={e => this.addQuestion(e)}>Add Question</button>
                <div>
                    {this.questionsList}
                </div>
            </div>
        );
    }
};

export default SurveyCreation;

Nicholas Tower · Accepted Answer · 2020-05-08 23:47:54Z

5

The only way a react component knows to rerender is by setting state. So you should have an array in your state for the questions, and then render based on that array. In the array you want to keep data, not JSX elements. The elements get created when rendering.

constructor(props) {
  super(props);
  this.state = {
    questions: [],
  }
}

addQuestion = () => {
  setState(prev => ({
     // add some object that has the info needed for rendernig a question. 
     // Don't add jsx to the array
    questions: [...prev.questions, { questionId: prev.questions.length }];
  })
}

render() {
  return (
    <div>
      <button onClick={e => this.addQuestion(e)}>Add Question</button>
      <div>
        {this.state.questions.map(question => (
          <div key={question.questionId}>

          </div>
        )}
      </div>
    </div>
  );
}

answered May 8, 2020 at 23:47

Nicholas Tower

87.1k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Johns Over a year ago

Is there any drawback of use JSX inside a state?

Nicholas Tower Over a year ago

Doing so makes it very easy to write bugs in which you render stale components.

qwertynik Over a year ago

How about storing data in a different variable, in context, or a redux store and only storing identifier information in the state? Wouldn't this make the component lighter and also perhaps more performant?

dmiranda2791 · Accepted Answer · 2020-05-08 23:48:05Z

1

I think you're component is not re-rendering after you fill the array of elements.

Try adding the questionsList to the component's state and modify your addQuestion method so that it creates a new array, finally call setState with the new array.

answered May 8, 2020 at 23:48

dmiranda2791

215 bronze badges

Comments

angelCanales · Accepted Answer · 2020-05-08 23:50:18Z

1

You need to map your this.questionsList variable.

You can save the 'question string' in the array and then iterate the array printing your div.. Something like this.

<div>
    {this.state.questionsList.map(questionString, i => (
      <div key={i}>
        {questionString}
      </div>
    )}
</div>

answered May 8, 2020 at 23:50

angelCanales

976 bronze badges

Collectives™ on Stack Overflow

How to append a dynamic HTML element to React component using JSX?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related