Render object in reactjs

Question

I have symfony rest api and I'm writing some frontend for this (1st time using react). So, here is my index.js:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visits: []
        };
    }

    componentDidMount() {
        const url = 'http://localhost/app.php/api/visits?from=2017-05-05&to=2017-05-08';
        axios.get(url)
            .then(response => response.json())
            .then(
                visits => this.setState({visits})
            ).catch(err => err)
    }

    render() {
        return (
            <div>
                <ul>
                    {this.state.visits.map((visit, index) => <li key={index}>{visit}</li>)}
                </ul>
            </div>
        )
    }
}
const app = document.getElementById('app');
ReactDOM.render(<App/>, app);

Response from api looks like:

{
    "2017-05-05":  2,
    "2017-05-06":  8,
    "2017-05-07": 10,
    "2017-05-08":  1,
}

How can i iterate through that and print it to the screen? Now i don't get any errors, just getting response from server but don't have anything on the screen.

Greetings

Mayank Shukla · Accepted Answer · 2017-05-23 15:31:38Z

3

Its not any array, its a object so directly map will not work on that. First we need to use Object.keys() to get all the keys in an array then use map on that.

Like this:

render() {
    let visits = this.state.visits;
    return (
        <div>
            <ul>
                {Object.keys(visits).map((visit, index) => <li key={index}>{visit} : {visits[visit]}</li>)}
            </ul>
        </div>
    )
}

Object.keys: will return an array of all the keys of that object.

Check the working snippet:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visits: []
        };
    }

    componentDidMount() {
        this.setState({
           visits: {
              "2017-05-05":2,
              "2017-05-06":8,
              "2017-05-07":10,
              "2017-05-08":1
            }
        })        
    }

    render() {
      let visits = this.state.visits;
      return (
        <div>
            <ul>
                {Object.keys(visits).map((visit, index) => <li key={index}>{visit} : {visits[visit]}</li>)}
            </ul>
        </div>
    )
  }
}
const app = document.getElementById('app');
ReactDOM.render(<App/>, 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'/>

answered May 23, 2017 at 15:31

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lukasz-p Over a year ago

Yeah, my bad about this array. I made some changes with request (changed axios to fetch) and it's working with your code, thanks! :)

Andrea Reina Over a year ago

You can also use Object.entries, which returns a list of [key, value]: Object.entries(visits).map(([visit, n], index) => <li key={index}>{visit} : {n}</li>)

lukasz-p Over a year ago

I have one more problem. I'm getting data from 3 endpoints (visits, entrances and visitors). Responses are looking same (this same date but other number). How can I map this to render it in one table? Create other function which will merge that to one object?

Collectives™ on Stack Overflow

Render object in reactjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related