A
A
Alexander2018-07-11 12:37:29
JSON
Alexander, 2018-07-11 12:37:29

How to properly display data from Json in React?

Whatever I do, the error "TypeError: _client2.default.map is not a function" is thrown.
I still don’t understand how to pull out data from Json.
Please write an example how to get data from Json?

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {select2} from '../actions/index';
import data from '../reducers/client2.json';

class ClientsList extends Component {
  showList(){


    {data.map( function (item, index) {
      return (<li key={index}>{item.general.firstName}   </li>    );} )
    }



    return this.props.clients.map ((client) =>{
      return(
        <li onClick={() => this.props.select (client)}
        key={client.general.firstName}>{client.general.firstName} </li>
      );
    });
  }
  render (){

    return (

      <ol>
        {this.showList()}
      </ol>
    );
  }
}

function mapStateToProps (state){
  return {
    clients: state.clients
  };
}

function matchDispatchToProps (dispatch){
  return bindActionCreators({select2: select2}, dispatch)
}

export default connect(mapStateToProps, matchDispatchToProps)(ClientsList);

[
  {
    "general": {
      "firstName": "Liana",
      "lastName": "Crooks",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"
    },
    "job": {
      "company": "Ledner, Johnson and Predovic",
      "title": "Investor Functionality Coordinator"
    },
    "contact": {
      "email": "[email protected]",
      "phone": "(895) 984-0132"
    },
    "address": {
      "street": "1520 Zemlak Cove",
      "city": "New Devon",
      "zipCode": "42586-7898",
      "country": "Guinea-Bissau"
    }
  },
 {
    "general": {
      "firstName": "Liana",
      "lastName": "Crooks",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"
    },
    "job": {
      "company": "Ledner, Johnson and Predovic",
      "title": "Investor Functionality Coordinator"
    },
    "contact": {
      "email": "[email protected]",
      "phone": "(895) 984-0132"
    },
    "address": {
      "street": "1520 Zemlak Cove",
      "city": "New Devon",
      "zipCode": "42586-7898",
      "country": "Guinea-Bissau"
    }
  }
]

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question