Multiples Forms rendering a card - reactjs

Question

I'm having a lot of troubles trying to render the data I passed into my inputs to render a "contact" card.
I'm handling the inputs, changing the states accordingly, but when it comes to the final state, rendering a "Contact card" with all my data I just don't know how to make it works.
I think the problem is at my "renderCard" method.
If someone could give me a hand I think i'm really close but yet so far..
import React, { Component } from 'react';
export default class Todo extends Component {
state = {
nom: '',
age: '',
ville: '',
items: [],
start: 0
};
onChange = (event) => {
this.setState({
[event.target.name]: event.target.value
});
}
onSubmit = (event) => {
event.preventDefault();
this.setState({
nom: '',
age: '',
ville: '',
items: [...this.state.items, this.state.nom, this.state.age, this.state.ville],
start: 1
});
}
renderCard = () => {
return this.state.items.map((item, index) => {
return (
<div className="card" key={index}>
{item.nom}
{item.age}
{item.ville}
</div>
);
});
}
render() {
return (
<div>
<div className="card mb-3">
<div className="card-header">Ajouter une Personne</div>
<div className="card-body">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label htmlFor="name">Nom</label>
<input
type="text"
className="form-control form-control-lg"
name="nom"
value={this.state.nom}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<label htmlFor="name">Age</label>
<input
type="text"
className="form-control form-control-lg"
name="age"
value={this.state.age}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<label htmlFor="name">Ville</label>
<input
type="text"
className="form-control form-control-lg"
name="ville"
value={this.state.ville}
onChange={this.onChange}
/>
</div>
<button className="btn btn-primary btn-block">Créez votre Fiche !</button>
</form>
</div>
</div>
{this.renderCard()}
</div>
);
}
}

Answer 1

You are making mistake in setting the items in state on submit. I hope the items should be a array of objects
Please check the below code
onSubmit = (event) => {
event.preventDefault();
this.setState({
nom: '',
age: '',
ville: '',
items: [...this.state.items, {nom:this.state.nom, age:this.state.age, ville: this.state.ville}],
start: 1
});