My array that I filled with my ajax request result will not appears in my react components unordered list.
When I do a console.log of the array I get:
[] 0 : "Career"
1 : "Middle College for Technology Careers"
2 : "Careers New Zealand"
3 : "Careers for Veterans 200"
4 : "Northside Health Careers High School"
5 : "Barbie's careers"
6 : "Edward M. Kennedy Academy for Health Careers"
7 : "The Careers Group, University of London"
8 : "Careers advisor"
9 : "Careers advisory service"
length : 10
proto : Array[0]
When I call this array inside my react component it does not render. Here is my code below.
HTML
<div id="content"></div>
JS
//array that the titles will be loaded into
var response = [];
$.ajax({
// request type ( GET or POST )
type: "GET",
// the URL to which the request is sent
url: "https://en.wikipedia.org/w/api.php?",
// data to be sent to the server
data: { action:'query', format:'json', list: 'search', srsearch: 'careers', srwhat: 'text', srprop: 'timestamp', continue: ''},
// The type of data that you're expecting back from the server
dataType: 'jsonp',
crossDomain : true,
// Function to be called if the request succeeds
success: function( jsondata ){
for(var i = 0; i < jsondata.query.search.length; i++){
//console.log( jsondata.query.search[i].title );
//pushes each result into the array named list
response.push(jsondata.query.search[i].title);
}
}
});
console.log(response)
var App = React.createClass({
render: function(){
//var title = list;
return(
<div>
<h1>Hello World</h1>
<p>The world is full of oppurtunity</p>
<ul>
<li>{response[0]}</li>
<li>Freedom</li>
<li>Lozve</li>
<li>Money</li>
</ul>
</div>
);
}
});
ReactDOM.render(<App/>, document.getElementById("content"));
Here is a link to my code pen where all my code is, http://codepen.io/vhall_io/pen/vKQrQN/ . I inserted response[0] into the first li tag and it will not render. Please help me render this.
