How to return variables to html from axios api on React

Question

I would like to return a single variable on my website that is founded in my API REST. I'm using Axios to integrate my backend to my frontend.

import api from '../../api';

async function handleBooks(e){
    e.preventDefault();
    
    const data = {
        title,
        reservation,
        rent,
        devolution
    }; 

    try{
        const response = await api.get('books', data);
        console.log(response); //it is working!
    }catch(err){
        console.log('!response');
    }
}

 return(
    //I would like to return one of those variables upside mentioned, for example: 'title'.
    <div>{response.data.title}<div/>
 );

Apostolos · Accepted Answer · 2020-08-05 12:09:13Z

1

Set response as React state:

import api from '../../api';
import React, {useState} from 'react

async function handleBooks(e){
    e.preventDefault();
    const [data, setData] = useState([])
    
    const data = {
        title,
        reservation,
        rent,
        devolution
    }; 

    try{
        const response = await api.get('books', data);
        setData(response.data)
        console.log(response); //it is working!
    }catch(err){
        console.log('!response');
    }
}

 return(
    //I would like to return one of those variables upside mentioned, for example: 'title'.
    <div>{data && data.title}<div/>
 );

edited Aug 5, 2020 at 12:09

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

answered Aug 5, 2020 at 12:08

Michał Lach

1,2784 gold badges20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

darkflame Over a year ago

Must I change it as a render function? As this function 'handleBooks' is inside a 'onSubmit', I'm receiving the data after the click, so then I cannot load <div>{data && data.title}</div>

Birender Pathania Over a year ago

yes you need to change it in the render function render() { return( <div>{data && data.title}<div/>); }

darkflame Over a year ago

Do you know how could I put all of these states as states on 'export default Class Books(){}' Instead of 'export default function Books()" as is wrote for the second model? const [title, setTitle] = useState(''); const [reservation, setReservation] = useState(0); const [rent, setRent] = useState(0); const [devolution, setDevolution] = useState(0); const [data, setData] = useState([]);

Stephan Bakkelund Valois Over a year ago

The useState() variable can only be used in a React component, so move it out of the handleBooks() function, into its parent component. Also, if it were to work, the jsx would not be able to reach the data variable because it belongs to a child function of the component. (because of closures)

darkflame · Accepted Answer · 2020-08-05 14:31:09Z

0

Answer:

+ const [datas, setData] = useState([]);
 + try{
            const response = await api.get('books', data);
            setData(response.data);
            console.log(response.data);
        }
    <ul>
        {datas.map(data => (
            <li key={data.id}>
            <p>{data.title}</p>
            <p>{data.rent}</p>
            <p>{data.devolution}</p>
            <p>{data.reservation}</p>
            </li>
         ))}
</ul>

answered Aug 5, 2020 at 14:31

darkflame

4137 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to return variables to html from axios api on React

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related