how can i add an array of html tags to jsx

user_17885189 0
Viewed 182

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)
react-dom jsx babeljs reactjs javascript
2 Answers

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

user_115893540

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).

user_106766820
Related