I am building the project for Random code generator using React.
But i am not receiving any data from the api fetch
I have called all cdn for react, react dom and babel, still nothing
theres my code (code is on codepen, on the js panel)
https://codepen.io/Nikhil2web/pen/abvLRWB
MY code
class Quote extends React.Component{
constructor(props){
super(props);
this.state={
api:null,
author:'',
text:'',
bgColor:'red',
c:0
};
this.handleClick=this.handleClick.bind(this);
this.share=this.share.bind(this);
}
handleClick(){
this.createQuote();
this.changeBg();
}
componentDiMount(){
fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json',{
headers:{
Accept:"application/json"
}
})
.then(response=>response.json())
.then((data)=>{
this.setState({
api:data.quotes,
author:data.quotes[0].author,
text:data.quotes[0].quote
});
});
}
createQuote=()=>{
const picked=[];
const quotes=this.state.api;
let n = Math.floor((Math.random() * quotes.length) + 1);
quotes.forEach(function(ele,index){
if(index==n){
picked.push(ele);
}
});
this.setState({
text:picked[0].quote,
author:picked[0].author
})
}
// changeBg=()=>{
// }
share=()=>{
var url = "twitter.com";
let text = `${this.state.author} - ${this.state.text}`
window.open('http://twitter.com/share?url='+encodeURIComponent(url)+'&text='+encodeURIComponent(text), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');
}
render(){
return(
//<div id="main">
// <style>
// {
// :root {
// --main-color: ${this.state.bgColor};
// --main-txt-color: ${this.state.bgColor};
// }
// }
// </style>
<div id="quote-box">
<h1>Random quote Generator</h1>
<p id="text">{this.state.text}</p>
<p id="author">--{this.state.author}</p>
<button id="tweet-quote" onClick={this.share}>Twitter</button>
<button id="new-quote" onClick={this.handleClick}>New Quote</button>
</div>
//</div>
);
}
}
ReactDOM.render(<Quote />,document.getElementById("root"));
Pls help
