CODEWITHSUNDEEP
javascriptreactjs
Naknak
Naknak

Reputation: 5

It keep ask me to wrap the jsx with enclosing tag and I think I did what i have to and its causing the problem

return (
    <div
        className="ag-theme-balham"
        style={{
            height: "300px",
            width: "1220px"
        }}>
            <AgGridReact
            columnDefs={table.columns}
            rowData={table.rowData2}
            pagination={true}
            />

        </div>
        <div>
        <Line
        data={state}
        options={{
          title:{
            display:true,
            text:'Average Rainfall per month',
            fontSize:20
          },
          legend:{
            display:true,
            position:'right'
          }
        }}
      />
      </div>

)

Isn't this the right way of using div? It keep gives me the error

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...?

When I just get rid of the second div and put the line tag into the first div it works... I've been having a similar problem for many days and always ended up rotating to another way since I can't solve it. Whats the cause of the problem?

Upvotes: 0

Views: 24

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281744

You have 2 div elements inside return. Wrap them within a Fragment

return (
  <>
    <div
        className="ag-theme-balham"
        style={{
            height: "300px",
            width: "1220px"
        }}>
            <AgGridReact
            columnDefs={table.columns}
            rowData={table.rowData2}
            pagination={true}
            />

        </div>
        <div>
        <Line
        data={state}
        options={{
          title:{
            display:true,
            text:'Average Rainfall per month',
            fontSize:20
          },
          legend:{
            display:true,
            position:'right'
          }
        }}
      />
      </div>
    </>
)

Upvotes: 2

Related Questions