CODEWITHSUNDEEP
javascriptreactjs
dczii
dczii

Reputation: 589

ReactJS - How can I add more text, textfields, selectfields upon clicking a button?

I want to add more text with textfields select fields. How can I add it upon clicking?

Below is the code I have. I want to have a new set of Print Methods which can be seen below.

For example, at the start I have this set of data with selections
Print methods (selecfield)
position: (textfield)
height: (textfield)
width: (textfield)
color: (textfield)

upon clicking I want it to be like this
Print methods (selectfield)
position:
height: (textfield)
width: (textfield)
color: (textfield)
Print methods (selectfield)
position: (textfield)
height: (textfield)
width: (textfield)
color: (textfield)

and add more every click

Upvotes: 0

Views: 70

Answers (1)

janpieter_z
janpieter_z

Reputation: 1742

I'd suggest doing something like the following (pseudo code). Please keep in mind this is super simple and not tested. Also using the index like this is not the smartest thing, using some kind of natural id (or a randomly generated one) is probably a smarter idea, but this should get you started. The Print component then simply renders your own code from the question for every print it finds (making sure it uses the right props and calls the onAddPrint method (this.props.onAddPrint).

class PrintForm extends React.Component {
  constructor() {
    //Initialize with one, empty one
    this.state = {
      prints: [{posStyle: undefined}]
    }
  }
  onAddPrint(print) {
    let newPrints  = this.state.prints[print.index] = print;
    newPrints.push({posStyle: undefined});    
    this.setState({
      prints: newPrints,
    });
  }

  render() {
    return this.state.prints.map(function(print, index) {
      return(<Print onAddPrint={this.onAddPrint} id={print.id} posType={this.posType} index={index} {all other props}></Print>);
    });
  }
}>

Upvotes: 1

Related Questions