У меня много проблем при попытке отобразить данные, которые я передал на входы, чтобы отобразить «контактную» карту.
Я обрабатываю входы, соответственно меняя состояния, но когда это происходитдоходит до конечного состояния, отрисовывая «карточку контакта» со всеми моими данными, я просто не знаю, как заставить ее работать.
Я думаю, проблема в моем методе renderCard.Если кто-то может мне помочь, я думаю, что я очень близок, но пока так далеко.
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>
);
}
}