Passed-down props rendering undefined on first page load?

Question

I have a site that is rendering cards of music artists then allowing the user to click on a button "View Ticket Activity" on each artist's card, which then allows more information to show up. Styled using Tailwind (the class names) and using react-router-v6.

I defined my artists state to successfully pull all the seeded artists from a rails DB and I output these artists all at once via a component called (which is routed to '/artists', where I pass down artists={artists} from the parent component . In , each artist maps out.

I have a separate component called that is routed (in ) to '/artists/:id' and is redirected there by a useNavigate() within . The problem there is that artist passes down from the parent to the child and thisArtist=undefined on the first pass, which then breaks the map function within . I'm defining it as thisArtist in place of artist within as a just in case to not have conflict name-wise with the const thisArtist = artists.find( (artist) => parseInt(id) === parseInt(artist.id) );

Within is my major issue. I've tried many re-writes (replacing the new component with an in-component modal, reconfiguring routes, etc) but fundamentally I need to understand why I have the thisArtist=undefined rendering issue. I'm not in strictMode (afaik) as I've seen the double-render-in-development posts so it's gotta be my error somewhere in my writing of this app.

ArtistsDisplay.js

function ArtistsDisplay({ artists, user, searchTerm, setSearchTerm }) {
  let navigate = useNavigate();

  return (
    
      
        
          SEARCH
           setSearchTerm(e.target.value)}
            placeholder='Search for your favorite artists here...just start typing'
            class='input input-bordered w-full input-lg text-center'
          />
        
      
      
        
          
            
              ARTISTS
            
            
          
          
            {artists
              .filter((artist) => {
                if (searchTerm === '') {
                  return artist;
                } else if (
                  artist.name.toLowerCase().includes(searchTerm.toLowerCase())
                ) {
                  return artist;
                }
              })
              .map((artist) => (
                
                  
                    
                      
                        
                          
                        
                      
                      {artist.name}
                      {artist.genre.name}
                      
                        
                      
                    
                  
                
              ))}
          
        
      
    
  );
}

export default ArtistsDisplay;

EachArtistCard.js
note: even with the two useEffects below commented out, thisArtist still =undefined

import React from 'react';
import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import IndividualPost from './IndividualPost';

    function EachArtistCard({ posts, setPosts, artists }) {
      let { id } = useParams();
 const thisArtist = artists.find(
        (artist) => parseInt(id) === parseInt(artist.id)
      );
   
    
    //* to set selling & looking
  useEffect(() => {
    thisArtist.posts.map((each) => {
      if (each.for_sale === true) {
        setSelling(selling + 1);
      } else {
        setLooking(looking + 1);
      }
    });
  }, []);

  //* to set upcomingShows
  useEffect(() => {
    thisArtist.concerts.map((each) => setUpcomingShows(upcomingShows + 1));
  }, []);
    
     
      return (
        
          
            
              
                
                  {thisArtist.name}
                
              
    
              
                
                  
                    
                      
                    
                  
                  
                    {thisArtist.name}
                    
                      There's {upcomingShows} upcoming concerts listed for{' '}
                      {thisArtist.name}!
                    
                    
                      
                        {selling} selling
                      
                      
                        {looking} looking
                      
                    
                    
                      
                      
                      
                    
                  
                
              
              
                ALL POSTS
              
            
          
        
      );
    }
    
    export default EachArtistCard;

App.js
removed a lot of other code not pertaining to the situation here

 import '../../src/App.css';
    import ArtistsDisplay from './ArtistsDisplay';
    import ConcertsDisplay from './ConcertsDisplay';
    import VenuesDisplay from './VenuesDisplay';
    import GenreDisplay from './GenreDisplay';
    import Login from './Login';
    import SignUp from './SignUp';
    import NotFound from './NotFound';
    import Header from './Header';
    import { Route, Routes } from 'react-router-dom';
    import { useState, useEffect } from 'react';
    import UsersPage from './UsersPage';
    import EachArtistCard from './EachArtistCard';
    
    function App() {
    
      const [user, setUser] = useState('');
      const [sessionInfo, setSessionInfo] = useState([]);
      
    
      const [searchTerm, setSearchTerm] = useState('');
      const [artists, setArtists] = useState([]);
     
      useEffect(() => {
        fetch('/artists')
          .then((r) => r.json())
          .then((info) => setArtists(info));
      }, []);
     
      return (
        
          
          
            
              }
            />
            
              }
            />
            
              }
            />
            } />
          
        
      );
    }
    
    export default App;

Will take any steps in the right direction as I'm lost. If more info is needed, please let me know.

Passed-down props rendering undefined on first page load?

0 Answers