How do I create an array with the input values from an array of input Components?

Question

everytime I click I concatenate components and render them to the screen. That works well. But what if I want to take the data(values) from those components and put them within the same array , CompList (or another array)? To be clear, I would all the values in the different input boxes to correspond to their own element within the array ex: if elementName = "" inside index 1 of the array, then "" is the value at the index. How would I go about doing this?

import React, { Component } from 'react';
import './App.css';
import Comp from './Comp';
import Button from './button';

class App extends Component {

  state = {
    CompList: [],
    elementName: ""
  }

  AddComp = event => {

    this.setState(
      {CompList: this.state.CompList.concat(this.state.elementName)}
    );
  }

  render() {

    return (
      <div>
        {this.state.CompList.map(el => <Comp/>)}
        <Button AddComp = {this.AddComp}/>
      </div>
    );
  }
}

export default App;

Here is the button to click that appends the component. AddComp is sent to this component.

import React from 'react';

const button = props =>{
    return(
        <div>
            <div onClick = {props.AddComp}>
                Clickme
            </div>
        </div>
    );
}

export default button;

And here is the component itself (the component that gets iterated and displayed). I hope Im being clear enough. If needed Ill gladly post additional information.

import React from 'react';

const Comp = props =>{
    return(
        <div>
            <input/>
            <div>
                100
            </div>
        </div>
    );
}

export default Comp;

I would like to help, but to be honest I'm not sure what you are trying to do:P Could you perhaps rephrase your question or explicate a bit more:) — Jakob Göran Thomasson
– Jakob Göran Thomasson, Commented Jun 21, 2018 at 20:23
Sure. So I have a dynamic list of components(The component contains an input tag). Every time I click the button it adds an input component. After I add enough components(no limit), I would like to type in the fields then save all of the data (including empty strings) to an array of it's own to be uses for later. I hope that's clear enough. — chree
– chree, Commented Jun 21, 2018 at 20:49
The new array should have the data listed exactly as it's typed in the fields. — chree
– chree, Commented Jun 21, 2018 at 20:50

Blake Steel · Accepted Answer · 2018-06-21 21:38:23Z

With some research on how .concat() works in JS, it implies you need to send an array (array1.concat(array2)) and it will combine them. You may be looking for .push(), which takes an element.

In addition, this.setState({ array: array.push(element) }) or this.setState({ array: array.concat(array2) }) will not work because both .push() and .concat() return the new length of the array, so you'll end up setting array to a number.

So, to do the task that you're looking for, you'll want to have your onClick function look something like this:

AddComp = event => {
  var tempCompList = this.state.CompList; //this creates a duplicate array
  tempCompList.push(this.state.elementName); //this needs to be separate or we will set a variable to an integer on accident

  this.setState(
    {CompList: tempCompList} //where we set the original array to the duplicate array
  );
}

Collectives™ on Stack Overflow

How do I create an array with the input values from an array of input Components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related