reactjs jsx ajax,javascript

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

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 (

Hello World

The world is full of oppurtunity

• {response[0]}
• Freedom
• Lozve
• Money

);

},

});

ReactDOM.render(, 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.