Axios and getRequest from external component

Question

I'm new to React.js and I'm actually trying to create a page structured in the following way:

-A form to insert [version,date,image,content] and post a JSON via POST request (with Axios) -A display part in which I GET the same data and display on screen by clicking on a button

actually I'm able to do this by introducing the Get and Post logic in the used component. In order to use Components and have a clear code, i would to have a separate component to call inside the various components to make a GET or POST request.

By using hooks I'm not able to do this. The actual code is:

This is UserGet.js

import axios from "axios";
import {useState} from "react";

const baseURL = "http://localhost:8088/";
const userURL ="changelog/version.txt";

function UserGet(props) {
    const [get, setGet] = useState(null);

        axios.get(baseURL+userURL).then((response) => {
            setGet(response.data);
        });

    return [get, setGet] ;
    
}

export default UserGet;

while in the component I want to use as data displayer:

const DisplayInfo =(props) => {

    const [items, setItems] = useState([]);

    const onFinish = (() => {
        setItems(UserGet());
    })
            
            const DisplayData = items.map(
                (info)=>{
                    return(
                        <div className='changelogDisplay' key={info.version}>  
                            <button className='version' >v  {info.version} </button>
                            <div className='datelog' > {info.data} </div>
                            <div className='dataHeader' > {info.title} </div>
                            <div className='whatsnew' > {info.text} </div>
                            <div className='imageLog' alt='Changelog pic' >{info.img} </div>
                        </div>
                    )
                });
            

    return(
        <div>
            <Form onFinish={onFinish}>
                <Form.Item>
                    <Button type="primary" htmlType="submit" name='Refresh'> Refresh list</Button>
                        <div className='displayData'>    
                            {DisplayData}
                        </div>
                    </Form.Item>
            </Form> 
        </div>
    )
}

export default DisplayInfo;

Actually, if I use

const response = UserGet();

I'm able to get data and insert into items for further process. I want to get the data using Onfinish or Onclick properties but I'm not able due to Hooks that cannot stay inside a function. How can I get a solution?

I tried different ways, and I don't want to use Redux at the moment in order to improve my knowledge on this.

Hooks are not so simple to me

Answer 1

Currently you're setting the items state to the [get, setGet] value that returns from the UserGet hook.

Here you return the data back from the request.

async function UserGet(props) {
  const response = await axios.get(baseURL + userURL);

  return response.data;
}

Then in the onFinish

const onFinish = (() => {
  const newItems = UserGet();
  setItems(newItems);
  // or
  // setItems(UserGet());
});

I hope this helps you with your project!