Estoy realmente confundido sobre cómo agregar (y eliminar) View y otros componentes similares durante el tiempo de ejecución,
por ejemplo, en JavaScript estándar puede usar document.querySelector('query-here').appendChild(element);
pero, ¿cómo logro lo mismo usando reaccionar nativo? por ejemplo:
<Pressable onPress={()=>{addElement(element)}}> <View> //add elements here </View>Sé cómo lograrlo directamente así:
<View> { [...Array(23)].map((el, index) => { return( <View key={index}> <Text>added new element</Text> </View> )}); } </View>¿podría alguien señalarme en la dirección correcta?
@cakelover aquí cómo puede agregar elementos y eliminar elementos según el estado del componente.
import { Button } from 'react-native'; const [loader, setLoader] = React.useState(false); //donot show loader at initial const showLoader = isShowLoader => { // based on this function you can add or remove single loader from UI setLoader(isShowLoader); } return ( <View> {loader && <LoaderComponent/>} <Button onPress={() => setLoader(!loader)} title="Toggle Loader Component" color="#841584" /> </View> )Si desea agregar o eliminar varios componentes iguales como una lista, debe usar matrices de elementos para eso.
No estoy seguro, pero tal vez podrías intentar algo como esto.
export default function App() { const [num, setNum] = useState(() => 0); const [renderTasks, setRenderTasks] = useState(()=>taskcreate(0)); function taskcreate() { let i=num; setNum(i+1); return( <View> { [...Array(i)].map((el, index) => { return ( <View key={index}> <Text>hello there</Text> </View> ) }) } </View> ) } return ( <View style={styles.container}> <Pressable style={{ height: 50, width: 50, backgroundColor: 'orange' }} onPress={() => { setRenderTasks(taskcreate()) }}></Pressable> { renderTasks } </View> ); }