使用React.js添加按钮时出错

Question

I am getting the following error while adding two extra button in the list using React.js.

Error:

./src/TodoItems.js
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (10:46)
   8 |  
   9 |   createTasks(item) {
> 10 |     return <li key={item.key}>{item.text}</li><a href="" class="button bg_green">Edit</a><a href=""class="button bg_red">Delete</a>
     |                                               ^
  11 |   }
  12 |  
  13 |   render() {

I am explaining my code below.

import React, { Component } from "react";
class TodoItems extends Component {
  constructor(props, context) {
    super(props, context);

    this.createTasks = this.createTasks.bind(this);
  }

  createTasks(item) {
    return <li key={item.key}>{item.text}</li><a href="" class="button bg_green">Edit</a><a href=""class="button bg_red">Delete</a>
  }

  render() {
    var todoEntries = this.props.entries;
    var listItems = todoEntries.map(this.createTasks);

    return (
      <ul className="theList">
          {listItems}
      </ul>
    );
  }
};

export default TodoItems;

Here I am adding two button with the list ie-li element and getting the above error. I need to resolve those error and add two button there.

Answer 1

import { Fragment } from 'react'

 createTasks(item) {
return 
       <Fragment>
            <li key={item.key}>{item.text}</li>
            <a href="" class="button bg_green">Edit</a>
            <a href=""class="button bg_red">Delete</a>
       </Fragment>

}

Answer 2

Since you want to create a list wiche should look in pure HTML like this:

<ul>
  <li>
      Some Text
      <a href="" class="button bg_green">Edit</a>
      <a href=""class="button bg_red">Delete</a>
  </li>
  <!-- ... -->
</ul>

When you want to return a multiple components you need to wrap them inside a parent note. In this case you can use the li tag to have the correct semantic of you html. Additionaly you need to change the key word class to className .

createTasks(item) {
    return (
        <li key={item.key}>
            {item.text}
            <a href="" className="button bg_green">Edit</a>
            <a href=""className="button bg_red">Delete</a>
        </li>
    )
}

render() {
    var todoEntries = this.props.entries;
    var listItems = todoEntries.map(this.createTasks);

    return (
        <ul className="theList">
            {listItems}
        </ul>
    );
}

Working Example

 class TodoItems extends React.Component { constructor(props, context) { super(props, context); this.createTasks = this.createTasks.bind(this); } createTasks(item) { console.log(item) return ( <li key={item.key}> {item.text} <a href="" className="button bg_green">Edit</a> <a href=""className="button bg_red">Delete</a> </li> ) } render() { var todoEntries = this.props.entries; var listItems = todoEntries.map(this.createTasks); return ( <ul className="theList"> {listItems} </ul> ); } } const entries = [ { key: 1, text: "Lern some Vanila JavaScript" }, { key: 2, text: "Lern some React" } ] ReactDOM.render( <TodoItems entries={entries}/>, document.querySelector('#app') ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 3

Try to wrap returned value in createTasks method:

  createTasks(item) {
    return 
           <div>
                <li key={item.key}>{item.text}</li>
                <a href="" class="button bg_green">Edit</a>
                <a href=""class="button bg_red">Delete</a>
           </div>
  }