According to the task you need to create a form and display all its values ​​in the table below. It seems that something has already been done, but only the first values ​​are output, but it is necessary that when you re-enter a row is added to the table.

Here is the link to 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') );

    1 answer 1

     handleClick() { //лучше создавать буферный объект а не массив let tempObject ={ 'firstName':this.state.firstName, 'lastName':this.state.lastName, 'activity':this.state.activity, 'checkItems':this.state.checkItems }; this.setState({ newArray: this.state.newArray.concat(tempObject) }) this.setState({ checkItems: "", }) } //в props передается массив объектов function Table(props) { return ( <table> <thead> <TableHead /> </thead> <tbody> //перебираем массив и каждый элемент(объект) передаем функции TableRow как props {props.newArray.map( (item, index) => { console.log(item); return <TableRow key = {index} newArray={item}/> })} </tbody> </table> )} //получаем в props объект и выводим его свойства в каждой ячейке function TableRow(props) { return ( <tr> <TableButton /> <td> {props.newArray.firstName} </td> <td> {props.newArray.lastName} </td> <td> {props.newArray.activity} </td> <td> {props.newArray.checkItems} </td> </tr> )}

    Extra functions can be removed, if it helped, then accept it as the correct answer.