React rendering in a loop stops after first element

Question

I am rendering multiple divs using the class but I see only the first div rendered.

<html> 
<body> 
  <div class="elem" name="foo"/>
  <div class="elem" name="bar"/>
  <script src="public/bundle.js" type="text/javascript"></script>
</body> 
</html>

JSX:

import React from 'react';
import {render} from 'react-dom';

class MyElement extends React.Component {
    render () {
        return <div>NAME: {this.props.name}</div>
    }
}

var divs = document.getElementsByClassName('elem');
Array.prototype.forEach.call(divs, function(div, index) {
    render(<MyElement name={div.getAttribute('name')}/>, div);
});

I only see "NAME: foo" but no "NAME: bar". I even tried adding "key={index}" to element but no use.

Here are the dependencies used:

"dependencies": {
  "babel-core": "^6.23.1",
  "babel-loader": "^6.4.0",
  "babel-preset-es2015": "^6.22.0",
  "babel-preset-react": "^6.23.0",
  "react": "^15.4.2",
  "react-dom": "^15.4.2",
  "webpack": "^2.2.1"
}

Answer 1

Your divs should define with start and end tags.

<div class="app" name="foo"></div>
<div class="app" name="bar"></div>

React rendering in a loop stops after first element

Question

1 answers

solution1
1 ACCPTED 2017-03-21 16:20:52

React rendering in a loop stops after first element

Question

1 answers

solution1 1 ACCPTED 2017-03-21 16:20:52

solution1
1 ACCPTED 2017-03-21 16:20:52