Render element on a page with React JS

user_12145200 0
Viewed 66

Taking my first steps in React. Please help to display this part:

{
  incidents.forEach(incidents => {
    incidents.map(inc =>{
      return (
        <div key={inc.id} className='inc'>
          <div className='incDescr'>Description: {inc.title}</div>
        </div>
      )
    })
  })
}

in the code below. 

import React from 'react';

const api_url = 'http://localhost:8080';
const errorHandler = error => this.setState({ error, isLoading: false });

class AllIncidents extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            incidents: [],
            error: null
        };
    }

    getIncidents() {
        fetch(api_url + '/incident/')
            .then(res => res.json())
            .then(data => this.setState({
                    incidents: [data],
                    isLoading: false
                })
            ).catch(errorHandler);
    }

    componentDidMount() {
        this.getIncidents();
    }

    render() {
        const { incidents, error } = this.state;
        return (
            <React.Fragment>
                <h1>All Incidents</h1>
                {error ? <p>{error.message}</p> : null}

                {
                    incidents.forEach(incidents => {
                        incidents.map(inc =>{
                            return (
                                <div key={inc.id} className='inc'>
                                    <div className='incDescr'>Description: {inc.title}</div>
                                </div>
                            )
                        })
                    })
                }
            </React.Fragment>
        );
    }
}
export default AllIncidents;

Response from the back-end:

[{"id":"5d923ecd9a65603e8bd1022f","title":"Incident 6","description":null,"status":null},{"id":"5d923fc49a65603e8bd10230","title":"Incident 6","description":null,"status":null},{"id":"5d923fc79a65603e8bd10231","title":"Incident 6","description":null,"status":null},{"id":"5d923fc89a65603e8bd10232","title":"Incident 6","description":null,"status":null},{"id":"5d923fc99a65603e8bd10233","title":"Incident 6","description":null,"status":null},{"id":"5d923fca9a65603e8bd10234","title":"Incident 6","description":null,"status":null},{"id":"5d923fcb9a65603e8bd10235","title":"Incident 6","description":null,"status":null},{"id":"5d923fcc9a65603e8bd10236","title":"Incident 6","description":null,"status":null},{"id":"5d923fcd9a65603e8bd10237","title":"Incident 6","description":null,"status":null},{"id":"5d923fcd9a65603e8bd10238","title":"Incident 6","description":null,"status":null},{"id":"5d923fce9a65603e8bd10239","title":"Incident 6","description":null,"status":null},{"id":"5d923fcf9a65603e8bd1023a","title":"Incident 6","description":null,"status":null},{"id":"5d923fd09a65603e8bd1023b","title":"Incident 6","description":null,"status":null},{"id":"5d923fd19a65603e8bd1023c","title":"Incident 6","description":null,"status":null},{"id":"5d923fd19a65603e8bd1023d","title":"Incident 6","description":null,"status":null},{"id":"5d923fd29a65603e8bd1023e","title":"Incident 6","description":null,"status":null},{"id":"5d923fd39a65603e8bd1023f","title":"Incident 6","description":null,"status":null},{"id":"5d923fd39a65603e8bd10240","title":"Incident 6","description":null,"status":null},{"id":"5d923fd49a65603e8bd10241","title":"Incident 6","description":null,"status":null},{"id":"5d923fd59a65603e8bd10242","title":"Incident 6","description":null,"status":null},{"id":"5d923fd59a65603e8bd10243","title":"Incident 6","description":null,"status":null},{"id":"5d923fd69a65603e8bd10244","title":"Incident 6","description":null,"status":null},{"id":"5d923fd79a65603e8bd10245","title":"Incident 6","description":null,"status":null},{"id":"5d923fd79a65603e8bd10246","title":"Incident 6","description":null,"status":null}]
reactjs javascript
1 Answers

You are iterating over your array twice, try removing the incidents.forEach so the code looks like this:

{incidents.map(inc => (
  <div key={inc.id} className='inc'>
    <div className='incDescr'>Description: {inc.title}</div>
  </div>
))}

Edit: To address your issue with cannot read setState of undefined, you need to bind your functions. Defining your fetch method as an arrow function should do the trick. Alternatively you could bind the function in your constructor.

getIncidents = () => {
  fetch(api_url + '/incident/')
    .then(res => res.json())
    .then(data => this.setState({
      incidents: data,
      isLoading: false
    }))
    .catch(errorHandler);
}
user_54238110
Related