How can I append a tab everytime I click in react?

chree Source

I want to output one tab everytime I click on the + button. I got it to output one. But now I am completely stumped. Here is My main component.

import React, { Component } from 'react';
import './App.css';
import InputTab from './components/tabs/InputTabs/InputTab';
import AddTab from './components/tabs/IncrementTabs/AddTab';

class App extends Component {

  state = {
    elementlist: ""
  }

  AddComponentHandler = event =>{

    this.setState(
      {elementlist: <InputTab/>}
    );
  }

  render() {
    return (
      <div>
        {this.state.elementlist}
        <AddTab AddComp = {this.AddComponentHandler.bind(this)}
        list = {this.state.elementlist}/>
      </div>
    );
  }
}

export default App;

here is the component button which I want to click to append the input.

import React from 'react';
import './AddTab.css';

const AddTab = props => {

    return(
        <div onClick = {props.AddComp}
        className = "addTab">
            +
        </div>
    );
}

export default AddTab;

And for reference, here is my inputtab which I want to output everytime i click. i hope i am being clear enough. Thank you in advance for help.

import React from 'react';
import './InputTab.css';

const InputTab = props => {
    return(
            <div className = "tabContainer">
                <input className = "inputTabName"/>
                <div className = "weightBox">
                    <input className = "inputTabWeight"/>%
                </div>
            </div>
    );
}

export default InputTab;
javascriptreactjs

Answers

answered 2 months ago Chase DeAnda #1

The ideal way would be to store an array of data in state, and then map() over that array to render out multiple InputTabs:

class App extends React.Component {

  state = {
    elementlist: []
  }

  AddComponentHandler = event => {

    this.setState( prevState => ({
      elementlist: prevState.elementlist.concat([Date.now()])
    }));
  }

  render() {
    return (
      <div>
        {this.state.elementlist.map( el => <InputTab /> )}
        <AddTab AddComp={this.AddComponentHandler} />
      </div>
    );
  }
}

const AddTab = props => {

    return(
        <div onClick = {props.AddComp}
        className = "addTab">
            +
        </div>
    );
}

const InputTab = props => {
    return(
            <div className = "tabContainer">
                <input className = "inputTabName"/>
                <div className = "weightBox">
                    <input className = "inputTabWeight"/>%
                </div>
            </div>
    );
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

answered 2 months ago falinsky #2

You can just keep a simple integer counter of tabs in App state and increase it when click on AddTab button. Then you can just render one InputTab for each number from 0 to counter stored in state.

class App extends React.Component {

  state = {
    elementsCounter: 0
  }

  AddComponentHandler = event => {

    this.setState( prevState => ({
      elementsCounter: prevState.elementsCounter + 1
    }));
  }

  render() {
    return (
      <div>
        {[...Array(this.state.elementsCounter).keys()].map( index => <InputTab key={index} /> )}
        <AddTab AddComp={this.AddComponentHandler} />
      </div>
    );
  }
}

const AddTab = props => {

    return(
        <div onClick = {props.AddComp}
        className = "addTab">
            +
        </div>
    );
}

const InputTab = props => {
    return(
            <div className = "tabContainer">
                <input className = "inputTabName"/>
                <div className = "weightBox">
                    <input className = "inputTabWeight"/>%
                </div>
            </div>
    );
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

comments powered by Disqus