How to show default value in console in react? - reactjs

Question

I am working on a React project, In that Project I have a form, In that form I have two Input
Tags. For first input tag I defined the value, For the second input tag I am assigning value by
using state. Now I am trying to console values of two Input tags but I am getting only second
Input tag value. So someone please help me to get Two Input tag values from form
This is Form.js
import React, { useState } from 'react';
import './aum-company-modal.css';
import Aumservice from '../../service/aum-service';
import { Button, Col, Modal, ModalBody,ModalFooter, ModalHeader, Row, FormGroup, Label, Input, } from 'reactstrap';
const AumCompanyModal = (props) => {
const [data, sendData] = useState({})
const [firstInputValue] = useState('1000')
const [inputValue, setInputValue] = useState('');
const handleChange = ({target}) => {
const { name, value } = target;
console.warn(name,value)
const newData = Object.assign({}, data, { [name]: value })
sendData(newData)
if (value > -1 && value < 100000000000000000000000000000000000) {
setInputValue(value);
}
}
const handleSubmit = (e) => {
e.preventDefault()
console.log(data)
}
return (
<Row>
<Col md="6" sm="6" xs="6">
<Modal isOpen={props.openModal}
>
<ModalHeader >Add new</ModalHeader>
<ModalBody>
<Row>
<Col md="12" sm="12" xs="12">
<FormGroup>
<Label for="exampleName">Min Value</Label>
<Input
type="text"
name="minValue"
placeholder="Enter minimum value"
value={firstInputValue}
/>
</FormGroup>
<FormGroup>
<Label for="exampleName">Max Value</Label>
<Input
type="number"
name="maxValue"
placeholder="Enter maximum value"
min='1000' max='100000000000000000000000000000000000'
value={inputValue}
onChange={handleChange}
/>
</FormGroup>
</Col>
</Row>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={props.closeModal}>
Cancel
</Button>
<Button type="submit" onClick={handleSubmit} color="primary">
Submit
</Button>
</ModalFooter>
</Modal>
</Col>
</Row>
)
}
export default AumCompanyModal
If you have any doubt please put a comment.

Answer 1

If for some reason, you need to hard code some value, use state variable as value and then you will have that variable in handleSubmit. Or you can use ref and get value from that ref
const [firstValue] = useState('100');
<Input
type="text"
name="minValue"
placeholder="Enter minimum value"
value={firstValue}
/>
Or you can use React.useRef()
const firstInput = React.useRef();
<Input
type="text"
name="minValue"
placeholder="Enter minimum value"
value="1000"
ref={firstInput}
/>
// in handleSubmit
const handleSubmit = (e) => {
e.preventDefault()
console.log(firstInput.current.value)
}