Getting error while adding buttons using 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 i.e-li element and getting the above error. I need to resolve those error and add two button there.

first thing first, use `className` instead of `class` in `JSX`, and use a `()` to wrap your `JSX` after the `return` — izengod, Feb 22 '18 at 07:10

score 2 · Answer 1 · answered Feb 22 '18 at 07:21

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>

}

Roman · Answer 2 · 2018-02-22T07:46:06.500

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>

score 0 · Answer 3 · answered Feb 22 '18 at 07:13

0

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>
  }

answered Feb 22 '18 at 07:13

Andrzej

561
1
7
22

Error gone but after submitting the li values are not displaying with both buttons. – Feb 22 '18 at 07:15
2
I would suggest using `
` instead of `
` - OP is constructing a list (see `
...
` in the DOM), and having divs as immediate children of ul wouldn't be a valid HTML.
– u354356007 Feb 22 '18 at 07:16
about to write this as comment. check this out https://reactjs.org/docs/fragments.html – saikiran Feb 22 '18 at 07:17

Getting error while adding buttons using React.js

3 Answers3

Working Example