Ionic React Newbie: Why this React code doesn't re-render itself?

It’s a simple screen where user can enter a Github username and some info associated with it will be shown.

It works fine witth MockData (offline array)

So you type in SearchBar -> Updates Home’s State -> Home Passes updated “profiles” to CardList -> Passes to Card.

I can see in devtools the console log works. I’ve also implemented this on plain react and it works. I wonder what I am missing here?

import React, { useState, useEffect } from "react";
import axios from "axios";
import {
  IonContent,
  IonHeader,
  IonList,
  IonPage,
  IonTitle,
  IonToolbar,
  useIonViewWillEnter,
  IonSearchbar,
  IonListHeader,
  IonItem,
  IonAvatar,
  IonLabel,
} from "@ionic/react";
import "./Home.css";

const mockData = [
  {
    id: "1",
    name: "Sans Mansion",
    company: "WOL",
    avatar_url: "https://placehold.it/100",
  },
  {
    id: "2",
    name: "John Doe",
    comapny: "Deere Farms",
    avatar_url: "https://placehold.it/100",
  },
];

interface Profile {
  id: string;
  name: string;
  company: string;
  avatar_url: string;
}

interface CardListProps {
  profiles: Profile[];
}

interface CardProps {
  id: string;
  name: string;
  company: string;
  avatar_url: string;
}

interface SearchBarInterface {
  updateProfiles: Function
}

const Card: React.FC<CardProps> = (props) => {
  return (
    <IonItem>
      <IonAvatar slot="start">
        <img src={props.avatar_url}></img>
      </IonAvatar>
      <IonLabel>
        <h2>{props.name}</h2>
        <p>{props.company}</p>
      </IonLabel>
    </IonItem>
  );
};

const CardList: React.FC<CardListProps> = (props) => {
  return (
    <IonList>
      {props.profiles.map((profile) => (
        <Card
          key={profile.id}
          id={profile.id}
          name={profile.name}
          company={profile.company}
          avatar_url={profile.avatar_url}
        />
      ))}
    </IonList>
  );
};

const SearchBar: React.FC<SearchBarInterface> = (props) => {
  const [searchText, setSearchText] = React.useState("");

  const handleSearch = async (e: CustomEvent) => {
    const response = await axios.get(`https://api.github.com/users/${searchText}`)
    props.updateProfiles(response.data)
  };

  const handleInput = (e: CustomEvent) => {
    setSearchText((e.target as HTMLInputElement).value);
  };

  return (
    <IonSearchbar
      value={searchText}
      onIonChange={handleSearch}
      onIonInput={handleInput}
      animated
      debounce={1000}
    />
  );
};

const Home: React.FC = (props) => {
  const [profiles, setProfiles] = useState<Profile[]>([]);

  useIonViewWillEnter(() => {
    console.log('will enter')
  });


  const updateProfiles = (profile: Profile) => {
    let newProfiles = profiles
    newProfiles.push(profile)
    setProfiles(newProfiles)
    console.log(profiles)
  }

  return (
    <IonPage id="home-page">
      <IonHeader>
        <IonToolbar>
          <IonTitle>GitHub Cards App</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <SearchBar updateProfiles={updateProfiles}/>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonListHeader>Search Results</IonListHeader>
        <CardList profiles={profiles} />
      </IonContent>
    </IonPage>
  );
};


export default Home;

1 post - 1 participant

Read full topic