How to hide a Button, Only if Value is there in Input tag in React

Question

I am working on a React project, In my project I have one button If I click that button one

model is appearing. In that Model I have two Input tags and three buttons.

Here comes the login, In UI If Input tags have a Value then I have to hide Blue button in UI.

And If In UI If Input tags have no Value then I have to hide Red Buuton in UI this time I have

to show Blue button.

This is App.js

import React, { useState } from 'react';
import './App.css';
import Form from './Form/Form';

function App() {
  const [show, setShow] = useState(false)
  return (
    <div className="App">
      <button className='btn btn-danger'
      onClick={() => setShow(true)}>Click here</button>
      { show && <Form></Form>}
    </div>
  );
}

export default App;

This is Form.js

import React, { useState } from 'react';
import './Form.css';
import {
    Row,
    Col,
    Button,
    ButtonGroup,
    Card,
    CardHeader,
    CardSubtitle,
    CardBody,
    CardText,
    Container,
    Modal,
    ModalBody,
    ModalFooter,
    ModalHeader,
    FormGroup,
    Label,
    Input,
    UncontrolledButtonDropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem
} from 'reactstrap';

const Form = () => {

    const fun = () => {

    }
    return (
        <div>
            <Row>
                <Col md="6" sm="6" xs="6">

                    <Modal
                        isOpen>
                        <ModalHeader >Add Role</ModalHeader>
                        <ModalBody>
                            <FormGroup>
                                <Label for="exampleName">Name</Label>
                                <Input
                                    type="text"
                                    name="name"
                                    placeholder="Enter Your Name"
                                    value='Tom'
                                />

                            </FormGroup>
                            <FormGroup>
                                <Label for="exampleEmail">Description</Label>
                                <Input
                                    type="textarea"
                                    name="description"
                                    placeholder="Enter Description"
                                    value='React developer'
                                />
                            </FormGroup>
                        </ModalBody>
                        <ModalFooter>
                            <Button color="secondary">
                                Cancel
            </Button>
                            <Button className='one' color="primary">
                                Blue
            </Button>

            <Button color='danger'>Red</Button>
                        </ModalFooter>
                    </Modal>
                </Col>
            </Row>
        </div>
    )
}

export default Form

If you feel I am not clear with my doubt please put a comment.

Answer 1

you can check truthy value. If input has value, show 1 button and hide the other

const Form = () => {
    const [value1, setValue1] = useState('');
    const [value2, setValue2] = useState('');
    return (
      <div>
       <Input
         type="text"
         name="name"
         placeholder="Enter Your Name"
         value={value1}
         onChange={e => setValue1(e.target.value)}
       />
       <Input
         type="text"
         name="value2"
         placeholder="Enter Your Email"
         value={value2}
         onChange={e => setValue2(e.target.value)}
       />
      {(!value1 || !value2) && <Button>Blue</Button>} // Show button if there is some value
      {(value1 && value2) && <Button>Rad</Button>} // Show button if field is empty
    </div>
   );
}