CODEWITHSUNDEEP
javascriptreactjs
user5443928
user5443928

Reputation:

Getting error while adding buttons using React.js

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.

Upvotes: 1

Views: 411

Answers (3)

Roman
Roman

Reputation: 5210

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>

Upvotes: 1

Rijul Zalpuri
Rijul Zalpuri

Reputation: 169

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>

}

Upvotes: 2

Andrzej
Andrzej

Reputation: 571

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

Upvotes: 0

Related Questions