CODEWITHSUNDEEP
javascriptreactjsbabeljsjsxreact-dom
user17885189
user17885189

Reputation:

how can i add an array of html tags to jsx

I am new in react and I have an issue that I didn't find any solution for after search.

When I store the array of html tags in variable I get minified React error #31

var k = [1,2,3];
var x = k.map(e=><li>{e}</li>);
var e = (
  <div>         
    <ul>
      {1 && {x}}
    <ul>
  </div>
);
var divTag = document.getElementById("k");
ReactDOM.render(e,divTag)

But when I write this I get no errors.

var k = [1,2,3];
var x = k.map(e=><li>{e}</li>);
var e = (
  <div>         
    <ul>
      {1 && k.map(e=><li>{e}</li>)}
    <ul>
  </div>
);
var divTag = document.getElementById("k");
ReactDOM.render(e,divTag)

Upvotes: 2

Views: 1013

Answers (2)

YadPe
YadPe

Reputation: 88

You need to remove the curly braces around the x variable {1 && {x}} -> {1 && x}

You are defining a new object containing the key x instead of just passing the array to react

Upvotes: 2

Dmytro Soltusyuk
Dmytro Soltusyuk

Reputation: 440

The solution

Replace {1 && {x}} with {1 && x}

Because you've wrapped x into curly braces, you've got the rendering error (you wanted to provide the array).

Upvotes: 0

Related Questions