i try to show articles in the page, but i got some problem that is need wrapped enclosing tag in reactjs. It looks like React isnt accepting same tags next to each other how do I display tabular data?

  render() {
  return (

    
    <div className="blogpost">
     {this.state.articles.map((news, i) => {
return (
        <div className="image-wrapper">
          <img className="responsive-img" src="" />
        </div>
        <div className="content"  key={i}>
          <h4>{news.tittle}</h4>
          <p>{news.content}</p>
        </div>
        <div className="footer">
          <div className="row">
            <div className="footer-content">
              <i className="material-icons">today</i>
              <span>{this.formatDate(news.created)}</span>
            </div>
            <div className="footer-content">
              <i className="material-icons">chat bubble outline</i>
              <a href="">6</a>
            </div>
          </div>
        </div>
        <div className="read-more">
          <a href="">Read more</a>
        </div>
          );
        })};
    </div>
  );
};

i try to show articles in the page, but i got some problem that is need wrapped enclosing tag in reactjs. It looks like React isnt accepting same tags next to each other how do I display tabular data?

  render() {
  return (

    
    <div className="blogpost">
     {this.state.articles.map((news, i) => {
return (
        <div className="image-wrapper">
          <img className="responsive-img" src="http://loremflickr./320/240" />
        </div>
        <div className="content"  key={i}>
          <h4>{news.tittle}</h4>
          <p>{news.content}</p>
        </div>
        <div className="footer">
          <div className="row">
            <div className="footer-content">
              <i className="material-icons">today</i>
              <span>{this.formatDate(news.created)}</span>
            </div>
            <div className="footer-content">
              <i className="material-icons">chat bubble outline</i>
              <a href="">6</a>
            </div>
          </div>
        </div>
        <div className="read-more">
          <a href="">Read more</a>
        </div>
          );
        })};
    </div>
  );
};

does anyone know where the problem is ?

• javascript
• node.js
• reactjs
• react-native

• it depends upon which version of React you are using. if you are using React v15 then you will have to use a wrapping html element. if its React 16 then you can use React fragements, or wrap whole elements inside simple [] array – Aman Commented Aug 5, 2018 at 13:25

4 Answers 4

Actually render should return single root element so everything should be wrapped inside one root element.

For example:

if you will do the following

render() {
 return(
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 );
}

or

render() {
 return(
  <div>....</div>
  <div>....</div>
  <div>....</div>
  <div>....</div>
 );
}

you will get the same error like in your current situation ("..need wrapped enclosing tag").

So what you need to do is wrap them in single root.

render() {
 return(
  <React.Fragment>
    <div>....</div>
    <div>....</div>
    <div>....</div>
    <div>....</div>
  </React.Fragment>
 );
}

or

render() {
 return(
  <div>
    <div>....</div>
    <div>....</div>
    <div>....</div>
    <div>....</div>
  </div>
 );
}

FYI:For similar siblings you also need to consider the unique keys....

This will also be helpful: https://reactjs/docs/fragments.html

You are missing a top wrapping element after your .map. I used <React.Fragment> but it would be anything you want.

render() {
  return (


    <div className="blogpost">
     {this.state.articles.map((news, i) => {
return (
        <React.Fragment>
        <div className="image-wrapper">
          <img className="responsive-img" src="http://loremflickr./320/240" />
        </div>
        <div className="content"  key={i}>
          <h4>{news.tittle}</h4>
          <p>{news.content}</p>
        </div>
        <div className="footer">
          <div className="row">
            <div className="footer-content">
              <i className="material-icons">today</i>
              <span>{this.formatDate(news.created)}</span>
            </div>
            <div className="footer-content">
              <i className="material-icons">chat bubble outline</i>
              <a href="">6</a>
            </div>
          </div>
        </div>
        <div className="read-more">
          <a href="">Read more</a>
        </div>
        </React.Fragment>
          );
        })};
    </div>
  );
};

bro you just try

<> </> 

this tags like this...

render() {
  return(
    <>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </>
  );
}

Try: {[<p>1</p>,<p>2</p>,<p>3</p>]}

to display lines as array elements.

it puts each

element on a seperate line.