React - Iterate state on button click

JavaScript
1

I populate my state through an API call, and then I need to show one object per button click.

But I can’t manage how to do this. I tried to assign current element to a variable, but nothing is working

import React, { useState, useEffect } from 'react'
import GetPlanets from '../../services/index'
import { Container, Name, Info, Button } from './Styles'

const Planetas = () => {

  const [ planetas, setPlanetas ] = useState([])
  const [ counter, updateCounter ] = useState(1)

  useEffect(() => {
    const fetchPlanetas = async () => {
      const planetas = await GetPlanets()
      setPlanetas(planetas)
    };
    fetchPlanetas().then((p) => {
      const current = (p[counter]);
    })
  }, [])

  const setCurrent = () => {
    if(planetas.length > 0) {
      this.current = (planetas[counter])
    }  
    console.log('current\n')
    console.log(current)
  }

  const handleClick = () => {
    updateCounter(counter + 1)
    setCurrent()
  }

  /* if(planetas.length > 0 ) {
  console.log('sjaisj\n')
  console.log(planetas[3].name)
  //  const a = planetas[3].name 
  } */


  return (    
   <Container>
     <Name>{current}</Name>
     <Button onClick={handleClick}></Button>
   </Container>
   
  { Code above works, but I can't access individual elements like planetas[i].prop}
{/* {planetas.map((planeta, key) => (
          <div key={key}>{planeta.name}</div>
        ))} */}

  )
}

export default Planetas

1 Like
2

Do you have this in a space we can view? For example, https://codepen.io or https://repl.it ?