I can render my page just once. After refreshing the page, i am getting an error as cant find data from api. Please let me know my mistake

I use useEffect to call api to fetch data. Data contains 10 arrays sets. In section = container, i fetched required data to specific section (layout done through css) . i can fetch data only once, after refreshing, error showing "cant found data". Please let me know my mistake

function App() {
    
      const [posts, setPosts] = useState([])
      const url = 'https://api.tvmaze.com/search/shows?q=all';
    
      useEffect(() => {
        fetch(url).then(resp => resp.json())    //api call
          .then(resp => setPosts(resp))
      }, []);
    
    
      return (
        <div class="App">
          
          <header class="App-header">
            <h1>WELCOME TO ZENERSPACE CINEMAS!!</h1>
          </header>
        
          {console.log(posts)}
         
          <div class="container-fluid">
            <section id="container">
    
              <div>
                <img src={myImg1} alt="" />   // fetching data from api call
                <a href={posts[0].show.url}>{`${posts[0].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto"><Link to="/Home">Show more details</Link></button>
              </div>
              <div>
                <img src={myImg2} alt="" />
                <a href={posts[1].show.url}>{`${posts[1].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg3} alt="" />
                <a href={posts[2].show.url}>{`${posts[2].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto"
                > Show more details
                </button>
              </div>
              <div>
                <img src={myImg4} alt="" />
                <a href={posts[3].show.url}>{`${posts[3].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg5} alt="" />
                <a href={posts[4].show.url}>{`${posts[4].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg6} alt="" />
                <a href={posts[5].show.url}>{`${posts[5].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg7} alt="" />
                <a href={posts[6].show.url}>{`${posts[6].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg8} alt="" />
                <a href={posts[7].show.url}>{`${posts[7].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg9} alt="" />
                <a href={posts[8].show.url}>{`${posts[8].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg10} alt="" />
                <a href={posts[9].show.url}>{`${posts[9].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
            </section>
    
          </div>
    
          <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossOrigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossOrigin="anonymous"></script>
    
        </div>
    
      );
    }
    
    export default App;

Solution

Here you go:

Some stuff: .map( ) function would definitely be better to use instead of array index to access items one-by-one plus less code and clean code.

import React, { useEffect, useState } from "react"

function App() {

  const [posts, setPosts] = useState([])

  useEffect(() => {
    const fetchData = () => {
      fetch("https://api.tvmaze.com/search/shows?q=all")
        .then(res => res.json())
        .then(json => {
          setPosts(json)
        })
    }
    fetchData()
  }, []);


  return (
    <div className="App">

      <header className="App-header">
        <h1>WELCOME TO ZENERSPACE CINEMAS!!</h1>
      </header>

      <div className="container-fluid">
        <section id="container">
          {
            posts.map(ele => (
              <div key={ele.show.id}>
                <a href={ele.show.url}>{`${ele.show.name}`}</a>
                <button type="button" className="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
            ))
          }
        </section>

      </div>
    </div>

  );
}

export default App;

Screenshot-Page:

Screenshot-Network