Вытащить значения из JSON и поместить на страницу

Получаю JSON по токену и сервера

{
  "status": "OK",
  "length": 2,
  "rows": [
           {
            "artistId": 6067766,
            "name": "Alice Merton"
           },
           {
            "artistId": 705,
            "name": "Muse"
           }
          ]
}

Но сделать в React так, чтобы данные под name выводились на экран у меня не выходит. Файл useAxios.js:

import { useState, useEffect } from 'react';
import axios from 'axios';
const useAxios = (url) => {
  const SUBS_URL = ""
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const token = localStorage.getItem("token");
  const fetchData = async () => {
      try {
        var config = {
        method: 'get',
        url: SUBS_URL,
        headers: { 
            'Authorization': `Bearer ${token}`
        }
        };
        axios(config)
        .then(function (response) {
        const userData = JSON.stringify(response.data);
        localStorage.setItem("userData", userData)
        console.log(userData);
        });
        }
        catch (error) {
            setIsLoading(false);
            setIsError(true);
            console.log(error);
          }
    }
    const userData = localStorage.getItem("userData");
    // userData = JSON.parse(userData);
    alert( userData.name);
    console.log("Nuber 2" + userData.name);
  useEffect(() => {
    fetchData();
  }, []);
  return { isLoading, isError, data };
};
export default useAxios;

Файл Menu:

const Menu = () => {
    const searchRef = useRef();
    const errRef = useRef();
    
    const [artist, setSearch] = useState('');
    const [errMsg, setErrMsg] = useState('');
    const token = localStorage.getItem('token');
    const userData = localStorage.getItem('userData');

    const { isLoading, isError, data: name } = useAxios();

    


    useEffect(() => {
        setErrMsg('');
    }, [artist])

    // Нажатие
    const handleSubmit = async (e) => {
        e.preventDefault();
    try {
        console.log("Tokennn = " + localStorage.getItem("token"));
        const artistId = parseInt (artist);
        const response = await axios.post(ADD_URL, {artistId},{headers:  {'Authorization': `Bearer ${token}`},'Content-Type': 'application/json;charset=UTF-8'} )
        .then(res => {
          console.log(res, token);
          console.log(res.data);
        })
        console.log(JSON.stringify(response));
        setSearch('');
    } catch (err) {
        if (!err?.response) {
            setErrMsg('No Server Response');
        }else if (err.response?.status === 401) {
                setErrMsg('Unauthorized');}
        errRef.current.focus();
    }
}
    
    return ( 
        <div class="main_menu">
            
                <button class="sidebar_btn">
                    <Link to="/MyArtists">My Artists</Link>
                </button>
            <container class = "menu">
            <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p>

                <button onClick class="sidebar_btn">
                    <Link to="/MyArtists">MyArtists</Link>
                </button>
                <div class="checkLP">
                    <h1>CheckLP</h1>
                </div>
                <div class="new-search">
                    <input type="text" maxlength= "250" placeholder="Search" class="searchbar"
                            id="search"
                            autoComplete="off"
                            onChange={(e) => setSearch(e.target.value)}
                            value={artist}
                            required/>
                    <button onClick={handleSubmit} class="searchbtn">

                    </button>
                </div>

                    
                <article class="post">
                <div>
                    <h1>Using Axios</h1>
                    {/* здесь должно выводиться имя */}
                </div>
                </article>
            </container>
        </div>
    )
}
     export default  Menu

Все данные из JSON с сервера получаю обратно и записываю в userData:

введите сюда описание изображения


Ответы (0 шт):