Как вернуть переменные в html из ax ios api на React

Question

Я хотел бы вернуть на свой веб-сайт единственную переменную, основанную на моем API REST. Я использую Ax ios для интеграции моего бэкэнда с моим внешним интерфейсом.

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/>
 );

Answer 1

Установить ответ как состояние React:

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/>
 );

Answer 2

Ответ:

+ 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>