CODEWITHSUNDEEP
react-native
cailixhill
cailixhill

Reputation: 45

react native conditional rendering with section list and flatlist

I have two different components one is CategoryList which is a flatlist and regionlist is a section list. I would like to display the CategoryList first and when item clicked the regionlist will show however I m not sure why it is not working. (I use context to store the state)

{!isToggle ? (
    <CategoryList></CategoryList>
  ) : (
    <RegionList style={styles.regionListStyle}></RegionList>
  )}

I also create a button to see if it is a problem about the context but it is not. 

const ToggleContext = createContext(true);

export const useToggle = () => {
return useContext(ToggleContext);
};

export function ToggleProvideData({children}) {
const [isToggle, setToggle] = useState(true)

return <ToggleContext.Provider value={{isToggle,setToggle}}>
        {children}
        </ToggleContext.Provider>;
}

I just wonder conditional render is it not working for flatlist?

UPDATE: I tried create a state to store the useContext isToggle but it only appears for like 1 sec

Upvotes: 0

Views: 606

Answers (1)

Ajith
Ajith

Reputation: 2666

I guess isToggle as a boolean variable, hence you can use the below code for rendering conditionally

{ (isToggle === true) &&
    <CategoryList></CategoryList>
}

{ (isToggle === false) &&
    <RegionList style={styles.regionListStyle}></RegionList>
}

Upvotes: 1

Related Questions