React – Cards are not rendering as I am calling for the data in this API

November 22, 2022

I am receiving a response from the API, but the data doesn’t display on the card. I don’t think it has much to do with the data I think it has much to do with the card appearing itself first. Here is how the search file is set up, pretty straight forward. As you see I did set up a container to hold the card as I map through it.

import '../styles/searchPage.css'
import SearchCard from '../components/SearchCard';

const API_URL =  'https://api.openbrewerydb.org/breweries?by_city';
const brewery1 = {
  "id": "10-barrel-brewing-co-san-diego",
  "name": "Nirmanz Food Boutique",
  "brewery_type": "large",
  "street": "1501 E St",
  "phone": "7739888990 ",
  "address": null,
  "city": "San Diego",
  "state": "California",
  "postal_code": "92101-6618",
  "country": "United States",
}

function SearchPage() {
  const [cards, setCards] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const searchRestaurants = async (name) => {
    const req = await fetch(`${API_URL}&s=${name}`);
    const data = await req.json()
    console.log(data[0].name)
    setCards({data: data.name})
  }

  useEffect(() => {
    searchRestaurants('')
}, [])

  return (  
    <div className='search'>
      <h1>Enter a City or Town name</h1>
      <div className='search-container'>
       <input 
        type="text"
        name="search"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)} 
        onKeyPress={(e) => {
          if (e.key === 'Enter'){
            setCards(searchTerm);
          }
        }}
        placeholder="Search..." 
        class="search-input"
        />
        <button 
        className='next'
        onClick={()=> searchRestaurants(searchTerm)}
        >Go</button>
        </div>
        {
            cards?.length > 0
             ? (
                <div className="container">
                {cards.map((card) =>(
                   <SearchCard brewery1={brewery1}/> 
                ))}
              </div>
             ) :
             (
                 <div className="empty">
                     <h2>Found 0 Breweries</h2>
                 </div>
             )
        }
    </div>
  );
}
export default SearchPage

Here is the my JSX for my search card labeling out what I want to display inside that card.

import '../styles/searchPage.css'

const SearchCard = ({brewery1}) => {
    return (
    <div className="card">
                {/* <img src={brewery1.Poster !== 'N/A' ? brewery1.Poster : 'https://via.placeholder.com/400'} alt={brewery1.name /> */}
            <div>
                <span>{brewery1.id}</span>
                <h3>{brewery1.brewery_type}</h3>
                <h2>{brewery1.street}</h2>
                <h2>{brewery1.adress}</h2>
                <h2>{brewery1.phone}</h2>
                <h2>{brewery1.city}</h2>
                <h2>{brewery1.state}</h2>
                <h2>{brewery1.postal_code}</h2>
                <h2>{brewery1.country}</h2>
            </div>
    </div>
    )
}
export default SearchCard;