Home / Questions / 559401
Accepted
Naidamag
Asked: 2022-09-29 08:14:31 +0800 CST 2022-09-29 08:14:31 +0800 CST

Convert this javascript code to reactjs

  • 772

Hello I am learning to use Reactjs so I need guidance to pass this code that I have in javascript to my app in reactjs

This is the code I have in 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;

This is where I need to do the same thing I did in javascript.

Reactjs file:

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;

This is my file where I consume the api that I am exporting to my file in 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));
}

Grateful if you can guide me or provide resources.

javascript

1 Answers

  1. Best Answer

    Everything seems to be fine, you could try adding something useEffectlike this, to make sure that you are receiving the data (then you could delete it, it's just to verify):

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

    If data has what you expect, you should only do in your component createReport:

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