When I press the button I want to add many Employees, but it only leaves me one. React

user_15472856 0
Viewed 117

Good morning, I have a question. When I press the + button, only one employee line is added and I would like it to be added as many times as I press

ReactJS component code:

class Home extends React.Component {

    state = { showForm:false }

    showForm = () => {
        return(
            <Employee />
        )
    }

    render() {
        return (
            <div className='container-home'>
                <div className='min-margin'>
                    <Employee />
                    {this.state.showForm ? this.showForm() : null}
                    <div className='container-append'>
                        <button onClick={() => this.setState({showForm: true})}>➕</button>

                    </div>
                </div>
            </div>
        )
    }
}
reactjs state
3 Answers

You just click to show and hide the input. You need:

  1. Add to state array: (inputs: ["Employee-0"])
  state = {
    showForm: false,
    inputs: ["Employee-0"]
  };
  1. Add to functions
  handleAddInput = e => {
    e.preventDefault();
    const inputState = this.state.inputs;
    let inputs = inputState.concat([`Employee-${inputState.length}`]);
    this.setState({
      inputs
    });
  };

  handleShowForm = e => {
    e.preventDefault();
    this.setState({
      ...this.state,
      showForm: !this.state.showForm
    })
  }
  1. Change the code in render
  render() {
    return (
      <div className="App">
        {this.state.showForm && <form>
          {this.state.inputs.map((input, idx) => (
            <Employee key={idx}/>
          ))}
        </form>}
        <button onClick={this.handleAddInput}>Add New Employee</button>
        <button onClick={this.handleShowForm}>Show form</button>
      </div>
    );
  }
  1. Click on the buttons)
user_159075810

The difference options exist for doing it , but that's work you did just a flag for shown of a Component. So you are able to try followings this:

class Home extends React.Component {

state = { 
   employeesCount: 0,
   employees: []
}

render() {
    return (
        <div className='container-home'>
            <div className='min-margin'>
                {employees.map((eNumber) => {
                    return <Employee key={eNumber}/>
                }}
                <div className='container-append'>
                    <button onClick={() => this.setState({
                        employeesCount: employeesCount + 1,
                        employees: [...this.state.employess , (employeesCount + 1)]
                    })}>➕</button>
                </div>
            </div>
        </div>
    )
  }
}
user_157704790

Try this:

import React from "react";

const Employee = (props) => {
  return(
    <div>Hello I am employee number {props.number}</div>
  )
}

class App extends React.Component {
  constructor() {
    super()
    this.state = { employees: [] }
  }


  addEmployee() {
    this.setState({
      employees: [...this.state.employees, <Employee number={this.state.employees.length} />]
    })
  }

  render() {
    return (
      <div>
        <div className='container-append'>
          <button onClick={() => this.addEmployee()}>➕</button>
        </div>
        { this.state.employees.map(employee => employee) }
      </div>
    )
  }
}
export default App;
user_130197560
Related