how to display none of the grid.col part when page is loading using react-CodePudding

The form starting from GRID.COL should be hidden during the page loading once the user clicks the plus button it should show in the page.

I am trying not to use css display none option instead trying to do it using react

please refer to the code listed below

const [visible, setVisible] = useState(false)

i tried onl oad but as it is returning a boolean that wont work can someone please help me with this.

CodePudding user response：

Try below

{
  visible && (
    <Grid className="form1">
      <Grid.Col span={12} sm={4}>
        <TextInput label="Input" />
      </Grid.Col>
      <Grid.Col span={12} sm={4}>
        <Select label="Types" data={types} />
      </Grid.Col>
      <Grid.Col span={12} sm={4}>
        <Select label="Boolean" data={boolean} />
      </Grid.Col>
    </Grid>
  );
}
 <Col span={12}>
   <Group position="right">
     <Box>
       <Button
         color="green"
         leftIcon={
           <FontAwesomeIcon
             icon={["fas", "plus"]}
             color="white"
             onClick={test}
           />
         }
       />
     </Box>
   </Group>
 </Col>