如何将 html 标签数组添加到 jsx

Question

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)

Answer 1

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

Answer 2

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