How to render a random object from an array

Question

I am working with a random object in an array, however I am not able to render it

I tried rendering using {planet.name}, and return (name is not defined):

return (
  <div className="App">
     <div>{planet.name}</div>
     <button onClick={this.renderPlanet}>Next</button>
  </div>
)

i tried redering using {planet}, and return (Objects are not valid as a React child (found: object with keys)):

return (
  <div className="App">
     <div>{planet}</div>
     <button onClick={this.renderPlanet}>Next</button>
  </div>
)

App.JS

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {
    data: [],
    chosenPlanet: 0,
  }
  componentDidMount() {
    const url = 'https://swapi.co/api/planets/'

    fetch(url)
      .then(response => response.json())
      .then(response => {
        this.setState({
          data: response.results,
        })
      })
  }
  render() { 
    const index = Math.floor(Math.random() * this.state.data.length)
    const planet = this.state.data[index]
    console.log(planet)

    return (
      <div className="App">
         <div>{this.planet.name}</div>
        <button onClick={this.renderPlanet}>Next</button>
      </div>
    )
  }
}

export default App;

i need to return:

<div className="app-container">
   <div>
       <h1>{planet.name}</h1>
       </div>
       <div className="about-container">
         <span>Population: {planet.population}</span>
         <span>Climate: {planet.climate}</span>
         <span>Terrain: {planet.terrain}</span>
         <br />
         <span>Quantidade de Filmes {planet.films.length}</span>
   </div>
</div>

Try to console.log(planet) before render and tell what it looks like? — Maheer Ali
– Maheer Ali, Commented Apr 13, 2019 at 1:35
How your planet looks like ? can you post your console in question ? — Code Maniac
– Code Maniac, Commented Apr 13, 2019 at 1:35
I see you're doing {this.planet.name} in your App.js render . Shouldn't you be doing {planet.name} instead? — Mudiaga Ejenavi
– Mudiaga Ejenavi, Commented Apr 13, 2019 at 1:59

Code Maniac · Accepted Answer · 2019-04-13 02:19:12Z

You're making a API call in componentDidMount so your data in state will be an empty array initially and you're accessing 0^th index

const index = Math.floor(Math.random() * this.state.data.length)
const planet = this.state.data[index]

and you end up getting a error planet is undefined,

So you can add a check before using value of planet

{planet && <div>{planet.name}</div>}

You can see a working example in snippet below

class App extends React.Component {
  state = {
    data: [],
    chosenPlanet: 0,
  }
  componentDidMount() {
    const url = 'https://swapi.co/api/planets/'

    fetch(url)
      .then(response => response.json())
      .then(response => {
        this.setState({
          data: response.results,
        })
      })
  }
  render() { 
    const index = Math.floor(Math.random() * this.state.data.length)
    const planet = this.state.data[index]
    return (
      <div className="App">
        {planet && <div>Name of planet: {planet.name}</div>}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

Collectives™ on Stack Overflow

How to render a random object from an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related