Rendering an array of html elements

Question

I want to render an array of html elements in my component. The reason for storing the data/html in an array is because I want to be able to dynamically load a new element depending on a button-click. This is how I want to display my array:

 <div>
       {this.state.steps}
 </div>

This is how I initiate my component and array:

  componentDidMount() {
        this.createProcessStep().then(step => {
            this.setState({steps: this.state.steps.concat(step)});
        });
    }
  export function createProcessStep() {
    this.setState({processStepCounter: this.state.processStepCounter += 1});
    return this.addStepToArray().then(d => {
        return this.reallyCreateProcessStep()
    });
  }
 addStepToArray = () => {
        const step = {
          ...Some variables...
        };
        return new Promise(resolve => {
            this.setState({
                stepsData: this.state.stepsData.concat(step)
            }, resolve)
        });
    };

"stepsData" is another array that holds data (variables) belonging to each step. "steps" on the other hand, should only hold the html. This is how one step/element looks like:

<div>
 ...Some Content...
 <button label="+" onClick={ () => {
                            this.createProcessStep().then(step => {
                                this.setState({
                                    steps: this.state.steps.concat(step)
                                });
                            })
                        }}/>
 ...other content...
</div>

This button within each step is responsible for loading/adding yet another step to the array, which actually works. My component displays each step properly, however react doesn't properly render changes to the element/step, which is to say that, whenever e.g. I change a value of an input field, react doesn't render those changes. So I can actually click on the "+"-button that will render the new html element but whenever a change to this element occurs, react simply ignores the phenotype of said change. Keeping in mind that the changeHandlers for those steps/elements still work. I can change inputfields, radioButtons, checkboxes etc. which will do exactly what it's supposed to, however the "re-rendering" (or whatever it is) doesn't work. Any ideas of what I'm doing wrong here? Thanks!

can you maybe explain how this npm could help? and how it works? does it wrap a component around or whats the benefit? — Felix
– Felix, Commented Jun 26, 2017 at 13:12
Hey you managed to resolve this? If not then: Your creation & addition works fine, the code for which you've provided, but can you include updation code too? So we can have a look & get a idea about way you are handling it! — demonofthemist
– demonofthemist, Commented Jun 26, 2017 at 15:05

Davorin Ruševljan · Accepted Answer · 2017-06-27 08:19:18Z

2

While you could certainly beat your approach into working, I would advise that you take more common react approach.

You make your components to correctly display themselves from the state . ie as many steps are in the state, your component will display. Than make your add button add necessary information (information, not formated html) to the state.

Here is an example how to use component N times:

const MyRepeatedlyOccuringComponent = (n) => (<p key={n}>There goes Camel {n}</p>)

const App = () => {
 const camels = [1,22,333,4444,55555]
 const caravan = camels.map((n) => MyRepeatedlyOccuringComponent(n))
 return(<div>{caravan}</div>
}

edited Jun 27, 2017 at 8:19

answered Jun 26, 2017 at 14:10

Davorin Ruševljan

4,40223 silver badges28 bronze badges

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

9 Comments

Felix Over a year ago

what would you recommend me as a common react approach?

Davorin Ruševljan Over a year ago

What I have written in second paragraph. Your state contains infiormation needed to display all the steps. Your Components correctly render that information. Add button, just ads more information to the steps. Or to summarize, it is common to keep in state only information and not formated html, formatting is left to the components.

Felix Over a year ago

You think storing html in State is not Common

Davorin Ruševljan Over a year ago

I think it kind of defeats separation of responsibilities between components and state.

Davorin Ruševljan Over a year ago

And to clarify some more. While you may have valid reasons to try to store html in state, need to "dynamically load a new element depending on a button-click" is not one of them since this need can be easily satisfied without storing html in state

|

Collectives™ on Stack Overflow

Rendering an array of html elements

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related