По заданию нужно создать форму и все ее значения вывести в таблицу ниже. Вроде кое-что уже сделал, но выводятся только первые значения, а нужно чтобы при повторном вводе добавлялась строка в таблицу.
Вот ссылка на Codepen.
function FirstName(props) {
return (
<label>
First Name
<input type="text"
name={props.name}
value={props.value}
onChange={props.onChange}/>
</label>
)
}
function LastName(props) {
return (
<label>
Last Name
<input type="text"
name={props.name}
value={props.value}
onChange={props.onChange}/>
</label>
)
}
function SelectActivity(props) {
const activityArray = ["Cooking", "Science Lab", "Painting","Swimming"];
return (
<div>
<p>Select Activity</p>
<select name={props.name}
onChange={props.onChange}>
{activityArray.map( (item, index) => {
return <option key={index}> {item} </option>
})}
</select>
</div>
)
}
function CheckApply(props) {
return(
<div>
<p>Check all that apply:</p>
{props.checkArray.map( (item, index) => {
return (
<label key={index}>
<input type="checkbox"
name={item.id}
onChange={props.onChange}/>
{item.description}
</label>
)
})}
</div>
)
}
function ButtonSubmit(props) {
return (
<button onClick={props.onClick}> Submit </button>
)
}
//-----------------------------------------------------------------------------------------------------
function TableHead() {
const tableHeadings = ["Remove", "First Name", "Last Name", "Activity", "Restrictions"];
return(
<tr>
{tableHeadings.map( (item, index) => {
return <th>{item}</th>
})}
</tr>
)
}
function TableButton(props) {
return <td> <button> X </button> </td>
}
function TableFirstName(props) {
return <td> {props.newArray[0]} </td>
}
function TableLastName(props) {
return <td> {props.newArray[1]} </td>
}
function TableActivity(props) {
return <td> {props.newArray[2]} </td>
}
function TableRestrictoins(props) {
return <td> {props.newArray[3]} </td>
}
function TableRow(props) {
return (
<tr>
<TableButton />
<TableFirstName newArray={props.newArray} />
<TableLastName newArray={props.newArray} />
<TableActivity newArray={props.newArray} />
<TableRestrictoins newArray={props.newArray} />
</tr>
)
}
function Table(props) {
return (
<table>
<thead>
<TableHead />
</thead>
<tbody>
<TableRow newArray={props.newArray}/>
</tbody>
</table>
)
}
//-----------------------------------------------------------------------------------------------------
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
firstName: "",
lastName: "",
activity: "",
checkItems: "",
newArray: [],
checkArray: [
{
id: "a",
description: "a) Dietary Restrictions"
},
{
id: "b",
description: "b) Physical Disabilities"
},
{
id: "c",
description: "c) Medical Needs"
},
],
}
this.handleChangeName = this.handleChangeName.bind(this);
this.handleChangeLastName = this.handleChangeLastName.bind(this);
this.handleChangeSelect = this.handleChangeSelect.bind(this);
this.handleChangeCheck = this.handleChangeCheck.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleChangeName(event) {
let val = event.target.value;
this.setState({firstName: val})
}
handleChangeLastName(event) {
let val = event.target.value;
this.setState({lastName: val})
}
handleChangeSelect(event) {
let val = event.target.value;
this.setState({activity: val})
}
handleChangeCheck(event) {
this.setState({checkItems: (this.state.checkItems + event.target.name)})
}
handleSubmit(event) {
event.preventDefault();
}
handleClick() {
let tempArray = [];
tempArray.push(this.state.firstName);
tempArray.push(this.state.lastName);
tempArray.push(this.state.activity);
tempArray.push(this.state.checkItems);
this.setState({
newArray: this.state.newArray.concat(tempArray)
})
this.setState({
checkItems: "",
})
}
render() {
return(
<React.Fragment>
<form onSubmit={this.handleSubmit}>
<FirstName
name="firstName"
onChange={this.handleChangeName}
/>
<LastName
name="lastName"
onChange={this.handleChangeLastName}
/>
<SelectActivity
name="activity"
onChange={this.handleChangeSelect} />
<CheckApply
checkArray = {this.state.checkArray}
onChange={this.handleChangeCheck} />
<ButtonSubmit onClick={this.handleClick}/>
</form>
<Table
newArray = {this.state.newArray} />
</React.Fragment>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);