I'm really confused on how to add (and delete) View and other such components during runtime,
for example in vanilla JavaScript you can use document.querySelector('query-here').appendChild(element);

but how do I achieve the same thing using react native? for example:

<Pressable onPress={()=>{addElement(element)}}>
<View>
 //add elements here
</View>

I know how to achieve it directly like this:

<View>
 {
  [...Array(23)].map((el, index) => {
    return(
     <View key={index}>
        <Text>added new element</Text>
     </View>
   )});
 }
</View>

could someone please point me in the right direction?

CodePudding user response：

@cakelover here how you can add item and remove items based on component's state.

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>
     )

If you want to add or remove multiple same components like list you should use arrays of items for that.

CodePudding user response：

I'm not sure but maybe you could try something like this

  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>
  );
}