Имеется компонент
import React, {useState} from "react";
import { View, StyleSheet, Text } from "react-native";
import ErrorIcon from "../icons-svg/error_icon";
import colors from "../../config/colors";
export function ErrorElement(props) {
const [isVisible, setVisible] = useState(true);
function ErrorView() {
return(
<View style={styles.errorStatusContainer} >
<ErrorIcon style={styles.icon}/>
<Text
numberOfLines={1}
style={styles.textContainer} >
{props.text}
</Text>
</View>
)
};
return(
isVisible ? <ErrorView /> : null
)
}
const styles = StyleSheet.create({
errorStatusContainer:{
flexDirection: "row",
backgroundColor:colors.background_light_grey,
width:"80%",
height:45,
marginTop:10,
borderRadius:15,
alignItems:"center"
},
icon:{
margin:10
},
textContainer:{
width:"80%"
}
})
Который возвращает просто иконку с текстом ошибки.
Вполне возможно, что я не понимаю React и делаю ошибку в логике написанного. Но стараюсь следовать документации.
Вопрос такой: как можно изменять состояние извне? То есть обращаться к setVisible
для изменения переменной isVisible
.
Проработанные примеры содержат непосредственно функцию в самом компоненте и вызывают ее при наступлении события, который связан с ним. Например, нажатие кнопки или тап по элементу на экране etc.
Моя цель это использовать данный компонент с функцией скрыть/показать не привязываясь к какому-то конекретному событию.