Make props in react-native state aware-CodePudding

I have a Component in ReactNative with properties I want to have a State, but how can I achieve this?

import React, { useState } from "react";
import {
  Alert,
  Text,
  TouchableHighlight,
  ScrollView,
  View,
} from "react-native";

const MyComponent = (props) => {
  const [modalVisible, setModalVisible] = useState(true);

  const _closeModal = () => {
    setModalVisible(false);
  };

  const toggleUser = async (user) => {
    Alert.alert(
      "Toggle",
      "You sure?",
      [
        {
          text: "Yes",
          onPress: () => {
            user.active = false;
          },
          style: "cancel",
        },
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "default",
        },
      ],
      { cancelable: false }
    );
  };
    
   const activeUsers = (users) => {
     return users.filter((item) => item.active);
   };
     

  return (
    <View>
      <ScrollView>
        {activeUsers(props.users).map((u) =>
          u.active == true ? (
            <View>
              <Text>
                {u.name}
                {u.active ? " - active" : null}
              </Text>
              <TouchableHighlight
                onPress={() => {
                  toggleUser(u);
                }}
              ></TouchableHighlight>
            </View>
          ) : null
        )}
      </ScrollView>
    </View>
  );
};

export default MyComponent;

Using it in the App.js:

<MyComponent users={this.state.users} ></MyComponent>

I'm looking for the possibility to have the list of Users to show only the active users. And if it's active, the toggle button to set active to false.

Now it doesn't work. Is this because it doesn't have a state? If so, how to make this state aware?

Of course the code does more than this, but this is the small part I cannot figure out.

CodePudding user response：

You must use state like this for activeUsers;

import React, { useState, useEffect } from "react"; // this line changed
import {
  Alert,
  Text,
  TouchableHighlight,
  ScrollView,
  View,
} from "react-native";

const MyComponent = (props) => {
  const [modalVisible, setModalVisible] = useState(true);
  const [activeUsers, setActiveUsers] = useState([]);
  

  // add this (I forget). dont forget to import!!

  useEffect(() => {
    getActiveUsers();
  }, []);

  const _closeModal = () => {
    setModalVisible(false);
  };

  const toggleUser = async (user) => {
    Alert.alert(
      "Toggle",
      "You sure?",
      [
        {
          text: "Yes",
          onPress: () => {
            const active = activeUsers;
            const filtered = active.filter(item => item.id !== user.id);
            user.active = false;
            filtered.push(user);
            setActiveUsers([...new Set(filtered)]);
          },
          style: "cancel",
        },
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "default",
        },
      ],
      { cancelable: false }
    );
  };
    /**
     * change this function name
     */
   const getActiveUsers = () => {
     const active = props.users.filter((item) => item.active);
     setActiveUsers(active);
   };
     

  return (
    <View>
      <ScrollView>
        {activeUsers.map((u) =>
          u.active == true ? (
            <View>
              <Text>
                {u.name}
                {u.active ? " - active" : null}
              </Text>
              <TouchableHighlight
                onPress={() => {
                  toggleUser(u);
                }}
              ></TouchableHighlight>
            </View>
          ) : null
        )}
      </ScrollView>
    </View>
  );
};

*** If you extract a component ad ListItem and pass user into it as state this this process much simple.