CODEWITHSUNDEEP
typescriptreact-native
marcinb1986
marcinb1986

Reputation: 892

state in React Native don't update

I cannot update state in useState coding in React Native. component is styled TextInput. What I do wrong that state don't see text input from SearchField ?

export const TabOneScreen: FC<IProps> = ({ navigation }) => {
  const [userName, setUserName] = useState("jan");

  useEffect(() => {
    fetch(`https://api.github.com/users/${userName}`)
      .then((response) => response.json())
      .then((json) => console.log(json));
  }, [userName]);

  const handleUserName = (value: string) => {
    setUserName(value);
  };

  return (
    <StyledContainer>
      <SearchField onChangeText={(value: string) => handleUserName(value)} />
      <Text>{userName}</Text>
      <DetailsField backgroundColor={colors.whiteColor} />
      <Button
        color={colors.buttonBackground}
        title="Show more"
        onPress={() => {
          navigation.navigate("DetailsScreen");
        }}
      />
    </StyledContainer>
  );
};

Upvotes: 0

Views: 54

Answers (1)

Ditiz
Ditiz

Reputation: 171

You need to give the value of userName to SearchField:

 <SearchField value={userName} onChangeText={(value: string) => handleUserName(value)} />

Without the property value set, your event will contain the right new value

Upvotes: 1

Related Questions