Form Data storing in array format - arrays

Question

I have created a form using reactjs now I want to store each submission in an array format
Eg.
item[0]: name:'name1' mail:'asd#sad'
item[1]: name:'name2' mail:'ds#asd'
I want in that array format and how do I achieve that?
I have tried the below code to store the data in array format but whenever I submit it creates new array everything should be stored in a single element
import React from 'react'
import './style.css'
class FormSample extends React.Component{
constructor(props){
super(props);
this.state={
fname:'',
lname:'',
email:'',
subject:'',
data:[]
}
}
handleFormSubmit(event){
event.preventDefault();
let items = [...this.state.data]
items.push({
fname: this.state.fname,
lname: this.state.lname,
email: this.state.email,
subject: this.state.subject
});
this.setState({
items,
// fname:'',
// lname:'',
// email:'',
// subject:'',
})
console.log(this.state)
}
render(){
return(
<div className="formData">
<p>Contact me</p>
<div>
<form action="#">
<label>first name</label>
<input
type="text"
id="fname"
name="firstname"
placeholder="your name..."
value={this.state.fname}
onChange={e => this.setState({fname: e.target.value})}/>
<label>last name</label>
<input
type="text"
id="lname"
name="lastname"
placeholder="last name.."
value={this.state.lname}
onChange={e => this.setState({lname: e.target.value})}/>
<label>Email</label>
<input
type="email"
id="email"
name="email"
placeholder="email"
value={this.state.email}
onChange={e => this.setState({email: e.target.value})}/>
<label>Subject</label>
<textarea
id="subject"
name="subject"
placeholder="write..."
value={this.state.subject}
onChange={e => this.setState({subject: e.target.value})}/>
<input type="submit" value="submit" onClick={e => this.handleFormSubmit(e)}/>
</form>
</div>
</div>
)
}
}
export default FormSample;
The output I got below in the console
After storing in the array format how do I fetch the data to display in the table format?

Answer 1

When setting state depends on previous state, always use an updater function rather than referring to state values directly.
I.e. don't do:
this.setState({myVal: this.state.myVal + 1})
Instead do:
setState(prevState => {myVal: prevState.myVal + 1})
This is due to the way React batches state updates. You can read more about it in the React docs on setting state.
That means that your code should read something like:
handleFormSubmit(event) {
event.preventDefault()
this.setState(prevState => ({
data: [...prevState.data,
{
fname: prevState.fname,
lname: prevState.lname,
email: prevState.email,
subject: prevState.subject
}]
}))
}
Here we are using the spread operator ... to create a new data array filled with the previous data array's values, and appending a new object to the end of it.
I saw on another answer that someone recommended using 'this.state.data.push({})`.
You should never mutate state directly. Array.prototype.push mutates the current array, meaning this is bad bad bad.
Stick with updating state in the correct way, using immutable objects and creating new arrays rather than pushing to existing ones.
To answer your question on how to access data once it's in the array, you just use standard syntax:
const { fname, lname, email, subject } = this.state.data[i]
where i is the index of the data object you are trying to access. I've used the object destructor syntax above because it exposes object properties nicely.

Answer 2

It Will Help You......
<table>
<tr>
<td>name</td>
<td>mail</td
</tr>
data.map((key,value)=>{
<tr key={key}>
<td>{value.name}</td>
<td>{value.name}</td>
</tr>
});
</table>

Answer 3

Do like this then you can store data in Array:-
handleFormSubmit(event) {
debugger;
event.preventDefault();
this.setState({
data: this.state.data.push({
fname: this.state.fname,
lname: this.state.lname,
email: this.state.email,
subject: this.state.subject
})
});
console.log(this.state);
}
render() {
const list = this.state.data;
return (
<div className="formData">
<p>Contact me</p>
<div>
<form action="#">
<label>first name</label>
<input
type="text"
id="fname"
name="firstname"
placeholder="your name..."
value={this.state.fname}
onChange={e => this.setState({ fname: e.target.value })}
/>
<label>last name</label>
<input
type="text"
id="lname"
name="lastname"
placeholder="last name.."
value={this.state.lname}
onChange={e => this.setState({ lname: e.target.value })}
/>
<label>Email</label>
<input
type="email"
id="email"
name="email"
placeholder="email"
value={this.state.email}
onChange={e => this.setState({ email: e.target.value })}
/>
<label>Subject</label>
<textarea
id="subject"
name="subject"
placeholder="write..."
value={this.state.subject}
onChange={e => this.setState({ subject: e.target.value })}
/>
<input
type="submit"
value="submit"
onClick={e => this.handleFormSubmit(e)}
/>
</form>
</div>
<Table data={this.state.data} />
</div>
);
}
And for displaying data in table :-
class Table extends Component {
state = {
list: this.props.data
};
render() {
return (
<div id="Table">
<table>
<thead>
<tr>
<th>fname</th>
<th>lname</th>
</tr>
</thead>
<tbody>
{this.state.list.map(item => {
return (
<tr>
<td>{item.fname}</td>
<td>{item.lname}</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
}