CODEWITHSUNDEEP
reactjs
sindhugauri
sindhugauri

Reputation: 189

Getting 'Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag' even when I use React.Fragment

I have a react component that renders a table. This is the code for render :-

      <>
        <table className="table">
          <thead>
            <tr>
              <th>S. NO.</th>
              <th>NAME</th>
              <th>ADDRESS</th>
              <th>TELEPHONE</th>
              <th>EMAIL</th>
              <th>AGE</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {this.state.personData.map((pRow, idx) => (
              <tr key={pRow.id}>
                <td>{idx + 1}</td>
                <td data-toggle="modal" data-target="#myModal">{pRow.name}</td>
                <td>{pRow.address}</td>
                <td>{pRow.phone}</td>
                <td>{pRow.email}</td>
                <td>{pRow.age}</td>
                <td>
                  {" "}
                  <DeleteButton
                    id={pRow.id}
                    onDelete={this.onDelete}
                  />{" "}
                </td>
              </tr>
          </tbody>
        </table>
        </>

I'm getting

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (123:4)

Here, line 123 is the line containing ''. What am I doing wrong here? I'm confused

Upvotes: 0

Views: 96

Answers (2)

Sarthak Aggarwal
Sarthak Aggarwal

Reputation: 2312

Try this. Your map is not closed. 

<>
    <table className="table">
      <thead>
        <tr>
          <th>S. NO.</th>
          <th>NAME</th>
          <th>ADDRESS</th>
          <th>TELEPHONE</th>
          <th>EMAIL</th>
          <th>AGE</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {this.state.personData.map((pRow, idx) => (
          <tr key={pRow.id}>
            <td>{idx + 1}</td>
            <td data-toggle="modal" data-target="#myModal">{pRow.name}</td>
            <td>{pRow.address}</td>
            <td>{pRow.phone}</td>
            <td>{pRow.email}</td>
            <td>{pRow.age}</td>
            <td>
              {" "}
              <DeleteButton
                id={pRow.id}
                onDelete={this.onDelete}
              />{" "}
            </td>
          </tr>
          ))} // MISSING PROPER CLOSING HERE
      </tbody>
    </table>
    </>

Upvotes: 2

Paweł Kłeczek
Paweł Kłeczek

Reputation: 46

In this particular example, you just forgot to close the map method within <tbody>...</tbody>

It should be:

<tbody>
  {this.state.personData.map((pRow, idx) => (
    <tr key={pRow.id}>
      <td>{idx + 1}</td>
      <td data-toggle="modal" data-target="#myModal">{pRow.name}</td>
      <td>{pRow.address}</td>
      <td>{pRow.phone}</td>
      <td>{pRow.email}</td>
      <td>{pRow.age}</td>
      <td>
        {" "}
        <DeleteButton
          id={pRow.id}
          onDelete={this.onDelete}
        />{" "}
      </td>
    </tr>
  ))}
</tbody>

Upvotes: 1

Related Questions