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
– izengod, Commented Feb 22, 2018 at 7:10
@izengod : I did like return <li key={item.key}>{item.text}</li><a href="" className="button bg_green" key={item.key}>Edit</a><a href=""className="button bg_red" key={item.key}>Delete</a> () but same error. — user5443928
– user5443928, Commented Feb 22, 2018 at 7:13
createTasks must return a parent element, like <li key={item.key}>{item.text} <a href="" className="button bg_green" key={item.key>Edit</a><a href=""className="button bg_red" key={item.key>Delete</a></li> or wrap it under a div ... check this below : stackblitz.com/edit/react-ypqryi — Jayavel
– Jayavel, Commented Feb 22, 2018 at 7:19
Possible duplicate React - expressions must have one parent element? — Mayank Shukla
– Mayank Shukla, Commented Feb 22, 2018 at 7:24

Rijul Zalpuri · Accepted Answer · 2018-02-22 07:21:11Z

2

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>

}

answered Feb 22, 2018 at 7:21

Rijul Zalpuri

1692 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roman · Accepted Answer · 2018-02-22 07:46:06Z

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>

Andrzej · Accepted Answer · 2018-02-22 07:13:18Z

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, 2018 at 7:13

Andrzej

5711 gold badge7 silver badges23 bronze badges

3 Comments

user5443928 Over a year ago

Error gone but after submitting the li values are not displaying with both buttons.

u354356007 Over a year ago

I would suggest using <React.Fragment> instead of <div> - OP is constructing a list (see <ul> ... <li> in the DOM), and having divs as immediate children of ul wouldn't be a valid HTML.

saikiran Over a year ago

about to write this as comment. check this out reactjs.org/docs/fragments.html

Collectives™ on Stack Overflow

Getting error while adding buttons using React.js

3 Answers 3

Comments

Working Example

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Working Example

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related