hi everyone I hope you all have a great day.Well recently I tried to understand React and the problem is I wanna get some information and see it on page I can randomly see different characters by RandomNum and put it in the https of that site but the truth is I can see it only in console not the page where is my problem ? I would be happy if you could help me thanks.
import './App.css';
// import Item from './myItem'
import React from 'react';
class StarWars extends React.Component{
constructor(){
super()
this.state={
loadedCharacter:false,
name:null,
height:null,
homeworld:null,
eye_color:null,
}
}
newCharacterFromBtn(){
const randomNum=Math.round(Math.random()*82)
const url=`https://swapi-node.vercel.app/api/people/${randomNum}/`
fetch(url)
.then(response => response.json())
.then(data =>{
console.log(data)
this.setState(
{ loadedCharacter:true,
name:data.name,
height:data.height,
homeworld:data.homeworld,
eye_color:data.eye_color,
})
})
}
render(){
return(
<div>
{
this.state.loadedCharacter &&
<div>
<h1>name:{this.state.name}</h1>
<p>height:{this.state.height}</p>
<p>homeWorld:{this.state.homeworld}</p>
<ul>
<li>eyecolor:{this.state.eye_color}</li>
</ul>
</div>
}
<button onClick={()=> this.newCharacterFromBtn()} type="button" className="btn">Randomize Character</button>
</div>
)
}
}
function App() {
return (
<div className="App">
<header className="App-header">
<StarWars />
</header>
</div>
);
}
export default App;
```
