0

Hola estoy aprendiendo a usar Reactjs por lo que necesito orientación para pasar este código que tengo en javascript a mi app en reactjs

Este es el codigo que tengo en javascript:

const data_api = await fetch(url, requestOptions)
  const res = await data_api.json();
  const res_data = res.data
 
  const arr = Object.entries(res_data);
  
  const arr1 = Object.keys(arr[1][1])
 
  let boton = ``;
  arr1.forEach((el) => {
    boton += `
     <div class='containerGame'>
           <button>${el}</button>
       </div> `

  });
  document.getElementById('container').innerHTML = boton;

Aqui es donde necesito hacer los mismo que hice en javascript.

Archivo Reactjs:

import React, { useEffect, useState } from 'react';
import { getData } from '../functions/functions';

const CreateReport = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    getData(setData)
  }, [])

  return (
      <div>
      </div>
  )
}

export default CreateReport;

Este es mi archivo donde consumo la api que estoy exportando a mi archivo en Reactjs

export const getData = (state) => {

  const config = {
    method: 'get',
    url: 'http://xxxxxxxxxxxxxx/cubo/api/ventas?empresa=63&periodo=202202',
    headers: {
      'token': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    }
  };

  axios(config)
    .then(response => state(response.data.data))
    .catch(error => console.error(error));
}

Agradecida si me pueden orientar o brindar recursos.

1 respuesta 1

1

Parece estar todo bien, podrias probar agregando un useEffect asi, para asegurarte que estas recibiendo la data (despues podrias borrarlo, es solo para verificar):

useEffect(() => {
  console.log(data)
}, [data])

Si data tiene lo que vos esperas, solo deberias hacer en tu componente createReport:

return (
      <div id="container">
          {data.lenght > 0 && data.map((el,index) => {
               return(
                      <div className='containerGame' key='index'>
                        <button>{el}</button>
                      </div>
                      )
               })
           }
      </div>
  ) 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.