React Get User Info.(Input Values) On a Button Click - reactjs

Question

I've made a simple resume portal. What I want is to get all the inputs values displayed on a screen on submit. This all should be done when button(Generate CV) is clicked.
Here's my code below:
Child component ( src -> Routes -> UserForm -> Components -> UserDetails -> index.js )
import React from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'
const UserDetails = (props) => {
const { wrkExpTxtArea, AcQuTxtArea, clickToAdd, clickToRmv, addAcQuTxtArea, rmvAcQuTxtArea, inputChangeHandler } = props
return (
<>
<div className='UserDetails'>
<Row>
<Col lg='6'>
<div className='persnlInfo'>
<h4>
Personal Information
</h4>
<p>Your Name</p>
<input onChange={() => inputChangeHandler('name')} type="text" placeholder="Enter here" />
<p>Your Contact</p>
<input type="text" placeholder="Enter here" />
<p>Your Address</p>
<textarea className='formAddress' rows="5" cols="10" placeholder="Enter here" />
<p id='impLinks'>Important Links</p>
<p>Facebook</p>
<input type="text" placeholder="Enter here" />
<p>Instagram</p>
<input type="text" placeholder="Enter here" />
<p>Linkedin</p>
<input type="text" placeholder="Enter here" />
</div>
</Col>
<Col lg='6'>
<h4>
Professional Information
</h4>
<p>Objective</p>
<textarea className='formObjective' rows="5" cols="10" placeholder="Enter here" />
<p>Work Experience</p>
{wrkExpTxtArea.map(item => (
<textarea className='formWrkExp' value={item.value} rows="3" cols="10" placeholder="Enter here" />
))}
<div className='Button' >
<input type='button' value='Add' onClick={clickToAdd} />
<input type='button' value='Remove' onClick={clickToRmv} />
</div>
<p id='AcQu'>Academic Qualification</p>
{AcQuTxtArea.map(item => (
<textarea className='formAcQu' value={item.value} rows="3" cols="10" placeholder="Enter here" />
))}
<div className='Button' >
<input type='button' value='Add' onClick={addAcQuTxtArea} />
<input type='button' value='Remove' onClick={rmvAcQuTxtArea} />
</div>
</Col>
<Row>
<div className='sbmtButton'>
<input type='button' value='Generate CV' />
</div>
</Row>
</Row>
</div>
</>
)
}
export default UserDetails;
Parent component ( src -> Routes -> UserForm -> index.js )
import React from "react";
import Pages from "../../Components/HOC/Page/index";
import UserDetails from "../UserForm/Components/UserDetails/index";
class UserForm extends React.Component {
state = {
wrkExpTxtArea: [{ text: "" }],
AcQuTxtArea: [{ text: "" }],
inputValues: [{name: 'name', value: ''}],
};
inputChangeHandler = (e,inputName) => {
let updatedInputs = [...this.state.inputValues]
let changedInputValuesIndex = updatedInputs.findIndex(input => input.name === inputName)
if (changedInputValuesIndex > -1) {
let updatedInputValue =
{...updatedInputs[changedInputValuesIndex]}
updatedInputValue.value = e.target.value
updatedInputs[changedInputValuesIndex] = updatedInputValue
}
this.setState({inputValues: updatedInputs})
}
addTextArea = () => {
let updatedTextArea = [...this.state.wrkExpTxtArea];
updatedTextArea.push({ text: "" });
this.setState({ wrkExpTxtArea: updatedTextArea });
};
rmvTextArea = () => {
let updatedTextArea = [...this.state.wrkExpTxtArea];
if (updatedTextArea.length > 1) {
updatedTextArea.pop({ text: "" });
}
this.setState({ wrkExpTxtArea: updatedTextArea });
};
addAcQuTextArea = () => {
let updatedTextArea = [...this.state.AcQuTxtArea];
updatedTextArea.push({ text: "" });
this.setState({ AcQuTxtArea: updatedTextArea });
};
rmvAcQuTextArea = () => {
let updatedTextArea = [...this.state.AcQuTxtArea];
if (updatedTextArea.length > 1) {
updatedTextArea.pop({ text: "" });
}
this.setState({ AcQuTxtArea: updatedTextArea });
};
render() {
return (
<>
<Pages showHeader showFooter>
<UserDetails inputChangeHandler={this.inputChangeHandler} wrkExpTxtArea={this.state.wrkExpTxtArea} clickToAdd={this.addTextArea} clickToRmv={this.rmvTextArea}
AcQuTxtArea={this.state.AcQuTxtArea} addAcQuTxtArea={this.addAcQuTextArea} rmvAcQuTxtArea={this.rmvAcQuTextArea} />
</Pages>
</>
);
}
}
export default UserForm;
Output:
I'm new to programming and getting values of user inputs seems insanely complicated to me. I'm little aware that this can be achieved using state , props etc. But I really have no idea about Where and What code is to place. I need help. That’s it!

Answer 1

You can use useRef hook and give a reference to each of input element.
For Example
const name = useRef();
const handleSubmit = () => {
if(name.current && name.current.value){
console.log(name.current.value) // input element's value
}
}
return (<div>
<input type="text" ref={name} />
<button onClick={handleSubmit}> Submit </button>
</div>)

Answer 2

add an onChange prop to the input tag like this:
const [inputValue, setInputValue] = useState('')
const inputChangeHandler = (e) => {
// e argument has received by default from onChange
const newValue = e.target.value
setInputValue(newValue)
}
<input onChange={inputChangeHandler} />
whenever you start changing the value of the input, inputChangeHandler function will trigger and then update your state

Answer 3

index.js
import React, { useState } from "react";
import Pages from "../../Components/HOC/Page/index";
import UserDetails from "../UserForm/Components/UserDetails/index";
const initialData = {
name: '',
contact: '',
address: '',
facebook: '',
instagram: '',
linkedin: '',
objective: '',
workExperience: [],
academicQualification: [],
}
const UserForm = () => {
// holds all the form data from child component "UserDetails"
const [formData, setFormData] = useState(initialData)
const handleSubmit = () => {
// submit handler
alert(JSON.stringify(formData, undefined, 4))
}
return (
<>
<Pages showHeader showFooter>
<UserDetails form={formData} setter={setFormData} onSubmit={handleSubmit} />
</Pages>
</>
)
}
export default UserForm;
UserDetails
import React, { useState } from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'
const UserDetails = ({ form, setter, onSubmit }) => {
const hanldeOnChange = (e) => {
setter(prev => {
// access property by input element's name
// update the state on parent component
prev[e.target.name] = e.target.value;
return { ...prev } // return copy after updating
})
}
const [listTypeElements, setListTypeElements] = useState({ workExperience: '', academicQualification: '' })
const handleListInput = (property) => {
setter(prev => {
prev[property].push(listTypeElements[property]);
return { ...prev }
})
setListTypeElements(prev => {
prev[property] = ''
return { ...prev }
})
}
const handleRemoveItem = (property) => {
setter(prev => {
prev[property].pop();
return { ...prev }
})
}
return (
<>
<div className='UserDetails'>
<Row>
<Col lg='6'>
<div className='persnlInfo'>
<h4>
Personal Information
</h4>
<p>Your Name</p>
<input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='name' />
<p>Your Contact</p>
<input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='contact' />
<p>Your Address</p>
<textarea className='formAddress' rows="5" cols="10" placeholder="Enter here" onChange={hanldeOnChange} name='address' />
<p id='impLinks'>Important Links</p>
<p>Facebook</p>
<input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='facebook' />
<p>Instagram</p>
<input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='instagram' />
<p>Linkedin</p>
<input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='linkedin' />
</div>
</Col>
<Col lg='6'>
<h4>
Professional Information
</h4>
<p>Objective</p>
<textarea className='formObjective' rows="5" cols="10" placeholder="Enter here" onChange={hanldeOnChange} name='objective' />
<p>Work Experience</p>
{form.workExperience.map((value) =>
<textarea className='formWrkExp' value={value} rows="3" cols="10" disabled={true} />)}
<textarea className='formWrkExp' value={listTypeElements['workExperience']} rows="3" cols="10" placeholder="Enter here" onChange={(e) => setListTypeElements(prev => {
prev['workExperience'] = e.target.value;
return { ...prev }
})} />
< div className='Button' >
<input type='button' value='Add' onClick={() => handleListInput('workExperience')} />
<input type='button' value='Remove' onClick={() => handleRemoveItem('workExperience')} />
</div>
<p id='AcQu'>Academic Qualification</p>
{form.academicQualification.map((value) =>
<textarea className='formAcQu' value={value} rows="3" cols="10" disabled={true} />)}
<textarea className='formAcQu' value={listTypeElements['academicQualification']} rows="3" cols="10" placeholder="Enter here" onChange={(e) => setListTypeElements(prev => {
prev['academicQualification'] = e.target.value;
return { ...prev }
})} />
< div className='Button' >
<input type='button' value='Add' onClick={() => handleListInput('academicQualification')} />
<input type='button' value='Remove' onClick={() => handleRemoveItem('academicQualification')} />
</div>
</Col>
<Row>
<div className='sbmtButton'>
<input type='button' value='Generate CV' onClick={onSubmit} />
</div>
</Row>
</Row>
</div>
</>
)
}
export default UserDetails;