Creating dynamic elements with js array in reactjs

Question

I have and array (JS) of data in React component. I want to generate dynamic divs using loop on that array.

One is it can be done with jquery / javascript

componentDidMount(){
    var headingsArray = //contains some data from backend;

    for (var i = 0; i < headingsArray.length; i++) {
        var maprow = '';
        maprow += "<div>"+ headingsArray[i] +"</div>";
       //Some More Data In maprow
       $('.parentDiv').append(maprow);
    }
}

render(){
   return(
       <div className="parentDiv"></div>
   )
}

What is the react way to do it? as i am new to react

Possible duplicate of Rendering React Components from Array of Objects — lumio
– lumio, Commented Sep 19, 2017 at 11:43

Hemerson Carlin · Accepted Answer · 2017-09-19 11:44:25Z

5

Use array.map to it:

render() {
  const headingsArray = [] // data from your backend

  return (
    <div className="parentDiv">
      {headingsArray.map((heading, index) => <div key={index}>{heading}</div>)}
    </div>
  )
}

key is a very important prop when mapping through an array. With that, react know which elements have been added, changed or deleted.

In case you have any question regarding array.map, please check this link.

edited Sep 19, 2017 at 11:44

answered Sep 19, 2017 at 11:41

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

7 Comments

Noman Ali Over a year ago

What is (heading, index) here?

Hemerson Carlin Over a year ago

heading is the current element at index

Noman Ali Over a year ago

Yes it did, now i am trying to implement it with 2d array. i am gonna accept this as an answer. thankyou :)

Noman Ali Over a year ago

How do i map This Kind of Array

Hemerson Carlin Over a year ago

Object.keys(yourObject).map(key => console.log(key, yourObject[key]))

|

Collectives™ on Stack Overflow

Creating dynamic elements with js array in reactjs

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related