I fell this is a very specific error for my current files and since the error in console is Greek to me...
I am not native English speaker. I am trying to put together React and HTML. I have a search form rendered with React in my HTML file. I need the user input in the input-element sent to the function search() in my javascript file. This I have had help with before and it worked fine for a while.
In my JS-file I have the search function. FOR NOW the result render lies there. I do not expect it to work!
My problem is the error I'm getting. It occurs upon hitting the search button. What does it mean? I can't understand it and thus I can't figure out where I'm doing wrong. Where is the error?
I use a downloaded library, I code in Atom and use Chrome's console.
Below are code + error.
> Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. at r (react.min.js:16) at c._renderValidatedComponent (react.min.js:13) at c._updateRenderedComponent (react.min.js:13) at c._performComponentUpdate (react.min.js:13) at c.updateComponent (react.min.js:13) at c.performUpdateIfNecessary (react.min.js:13) at Object.performUpdateIfNecessary (react.min.js:15) at u (react.min.js:15) at r.perform (react.min.js:16) at o.perform (react.min.js:16)<html><head><meta charset="utf-8"><title>Inlämningsuppgift 6</title><link rel="stylesheet" type="text/css" href="style.css"><script src="js/react.min.js"></script><script src="js/react-dom.min.js"></script><script src="js/browser.min.js"></script></head><body><div id="form_container"></div><div id="movies_list"></div><div id="gifs_list"></div><script type="text/babel">"use sctrict"; var Form = React.createClass({ search: search, //The search function from js-file attached globaly. renderForm: function() { return (<div className="form_div"> Movie: <input type="text" className="query"></input> //Button calls search function in js-file.<button onClick={this.search} className="submit">Search</button></div> ); }, render: function() { return this.renderForm(); } }); // End of class Form ReactDOM.render(<Form />, document.getElementById('form_container'));</script><script src="inl6.js"></script></body></html> function search(event) { event.preventDefault(); //Variables var movies_list = document.getElementById('movies_list'); var gifs_list = document.getElementById('gifs_list'); //Input validation and handling if(this.elements.query.value === '') { alert("Ange ett sökord!"); } else { var rawInputData = this.elements.query.value; var fixedInputData = rawInputData.split(""); var inputData = encodeQueryData(fixedInputData); var inputDatagif = encodeQueryDatagif(fixedInputData); //URL encoding functions function encodeQueryData(data) { let ret = []; for (let d in data) ret.push(encodeURIComponent(data[d])); return ret.join('%20'); } function encodeQueryDatagif(data) { let ret = []; for (let d in data) ret.push(encodeURIComponent(data[d])); return ret.join('+'); } // Objekt to handle AJAX var omdbAPI = new XMLHttpRequest(); var gifAPI = new XMLHttpRequest(); //Set URLs var omdbURL = "http://www.omdbapi.com/?s="+ inputData +"&type=movie"; var gifURL = "http://api.giphy.com/v1/gifs/search?q="+ inputDatagif +"&limit=1&api_key=dc6zaTOxFJmzC"; //Handle search response, validate and act omdbAPI.addEventListener("load", function() { if (this.responseText === '{"Response":"False","Error":"Movie not found!"}') { alert("Sökningen gav inget resultat."); } else { //Convert from JSON var result = JSON.parse(this.responseText); var entries = result.Search; //Loop through recieved object and display result. for(var entry_key in entries) { //control that property is own by the object (not prototype) if(entries.hasOwnProperty(entry_key)) { //Access the entry var entry = entries[entry_key]; //Display result var movie_line = "<p><strong>Title:</strong> "+ entry.Title +" (year: "+ entry.Year +")</p>"; console.log(movie_line); movies_list.innerHTML += movie_line; } } } }); //Rinse and repeat above for gifs and Giphy API gifAPI.addEventListener("load", function() { if (this.responseText === '{"Response":"False","Error":"Movie not found!"}') { alert("Sökningen gav inget resultat."); } else { var result = JSON.parse(this.responseText); var gifs = result.data; for(var entry_key in gifs) { if (gifs.hasOwnProperty(entry_key)) { var gif = gifs[entry_key]; var gif_line = "<img src='"+ gif.url +"'></img>"; gifs_list.innerHTML += gif_line; } } } }); //Send omdbAPI.open("get", omdbURL, true); omdbAPI.send(); gifAPI.open("get", gifURL, true); gifAPI.send(); }}