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

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