Showing JSON Data using fetch api and map in reactjs

Question

I have been trying to using fetch api to display json and to use map to iterate the data, but I am stuck in displaying json and iterating it in reactjs

Here is the file

App.js

import React, { Component } from 'react';

import './App.css';

class App extends Component {

  constructor(props) {
    super();

    this.state = {
      productlist:  [],
      error: null,
    }
  }

  componentDidMount(){
    
      fetch(`http://texpertise.in/data.php`)
    .then(result => result.json())
    .then(productlist => this.setState({productlist: productlist.value}))
    }

  render() {
     return (
            <div> 
                {this.state.productlist.map(product => 
                       <div> {product.name} </div>
                       <div> {product.description} </div> 
                       <div> {product.image} </div>
                       <div> {product.nonVeg} </div>
                       <div> {product.spicy} </div>
                       )}
            </div>
        );
  }
 }
export default 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>

I am getting this error

./src/App.js

Syntax error: reactspa/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag (42:23)

  40 |                 {this.state.productlist.map(product => 
  41 |                        <div> {product.name} </div>
> 42 |                        <div> {product.description} </div> 
     |                        ^
  43 |                        <div> {product.image} </div>
  44 |                        <div> {product.nonVeg} </div>
  45 |                        <div> {product.spicy} </div>

return the jsx from the map method. – Akshay Aggarwal Apr 10 '18 at 06:17 — Akshay Aggarwal, Apr 10 '18 at 06:17

score 2 · Accepted Answer · answered Apr 10 '18 at 06:12

When using react 15.1, your .map can only return a single element, in your case, you are returning

<div>{product.name}</div> <div>{product.description}</div>

it should be wrapped and returned as a single element

<div><div>{product.name}</div> <div>{product.description}</div></div>

Showing JSON Data using fetch api and map in reactjs

1 Answers1