[SOLVED] REACT - getting data to display after API request

1

Hi

I would like to display the data after an API call but presumably the async call finishes after the render() so I am lost.

import React, { Component } from 'react';
import styles from '../layout/styles';
import {Doughnut} from 'react-chartjs-2';
import Api from '../../utils/ApiManager';
import Chart from 'chart.js';
import {Link} from 'react-router';

const data = {
	labels: [
		'Red',
		'Green',
		'Yellow'
	],
	datasets: [{
		data: [300, 50, 100],
		backgroundColor: [
		'#FF6384',
		'#36A2EB',
		'#FFCE56'
		],
		hoverBackgroundColor: [
		'#FF6384',
		'#36A2EB',
		'#FFCE56'
		]
	}]
	,json :{ "id": "test"}
};


class Polldetail extends Component {
    
    constructor() {
		super()
		this.state = {
			selected: 0,
			list: [],
			data:data
		}
		
	}
  
    componentWillMount(){  // was using componentDidMount()
		console.log('componentDidMount (Polldetail): ' + this.props.location.pathname);
		
		//console.dir(this.props);
		var urlWithId =this.props.location.pathname;
		var pollID = urlWithId.split('/').pop();
		Api.get('/api/polls/' + pollID, null, (err, response) => {
			if (err) { 
				alert("Error: " + err); 
				return;
			}
			
			console.log('RESULTS: ' + JSON.stringify(response.message));
			
			this.setState({
					list: response.message
				});
			
			data.json = response.message;
		});
	
	
	}
	vote(){}
	
    eachPollResponse(resp) {
				return (<div className="responses">
							<p>test</p>
							<input ref="newText" type="text" className="form-control"></input>
							<button onClick={this.vote}>Vote</button>																	
					</div>)
	}
	
    
    render() {
        
        //const zoneStyle = styles.zone; // needs to be inside the render func!
        //cool
       
        return(<div className="container">
        		<div className="row">
		        	<div className="col-md-6">
		        	<Link to="/">Back</Link>
        		        <h2>{this.state.list.pollquestion}</h2>
        		        {this.state.list.responses.map(this.eachPollResponse)}
                	</div>
                	<div className="col-md-6">
                		<Doughnut data={this.state.data} />
                	</div>
                
	            </div>
    		</div>);
    }
}

export default Polldetail

Console output shows the API call finishes after the render

The line that fails is in the render:
{this.state.list.responses.map(this.eachPollResponse)}

2

I would create a child component that displays the responses. Then you can pass them in as props and it will re-render when the async function has returned results.

3

I tried that but couldn’t figure how how to pass the state from the parent to the child component.

4 
render() {
   return( <ResponsesContainer responses={variableFullOfResponses} />)
}

function eachPollResponse(resp) {
 // stuff
}

export const ResponseContainer = props => {
   let responses = props.responses.map(eachPollResponse);
  return( <div className="responses"
                {responses}
             </div>
            );
}

Honestly, the very best way to do this is to use a state management library like Redux, Flux, or MobX. I’m not entirely sure how best to deal with AJAX in React since I’ve always used another library to take care of it, but this seems like it should work.