Getting values from form input groups

Question

I have a group of form inputs that are produced like so:

Please see UPDATE 2 below for full component.

So, if there are three columns then three of this group will be shown in the form. I am trying to extract the data from these inputs but I only need the ids. How can I extract the column id from the TextField?

Also, I need to get the data (i.e. the ids) per group so that they appear in an array:

transformations: [{columnId: 1, ruleId: 4}, {columnId: 2, ruleId: 2}, {columnId:3 , ruleId: 1}]

These are just example values, the main problem as I mentioned, is that I'm not sure how to extract the value of the columnId from the first input. I'm also struggling with getting the multiple sets of data.

Any help with this problem would be much appreciated.

Thanks for your time.

UPDATE:

handleRuleChange looks like this:

handleRuleChange = (e, index, value) => {
  this.setState({
    ruleId: value
  })
}

UPDATE 2:

Here is the component:

import React from 'react'
import Relay from 'react-relay'

import { browserHistory } from 'react-router'

import SelectField from 'material-ui/SelectField'
import MenuItem from 'material-ui/MenuItem'
import TextField from 'material-ui/TextField'

import CreateTransformationSetMutation from '../mutations/CreateTransformationSetMutation'

class CreateTransformationSetDialog extends React.Component {

  componentWillMount() {
    this.props.setOnDialog({
      onSubmit: this.onSubmit,
      title: 'Create and Apply Transformation Set'
    })
  }

  initial_state = {
    targetTableName: '',
    ruleId: 'UnVsZTo1',
  }

  state = this.initial_state

  onSubmit = () => {
    const onSuccess = (response) => {
      console.log(response)
      browserHistory.push('/table')
    }

    const onFailure = () => {}

    Relay.Store.commitUpdate(
      new CreateTransformationSetMutation(
        {
          viewer: this.props.viewer,
          version: this.props.viewer.version,
          targetTableName: this.state.targetTableName,
          transformations: ///this is where I need to get the values///,
        }
      ),
      { onSuccess: onSuccess }
    )
  }

  handleTextChange = (e) => {
    this.setState({
      targetTableName: e.target.value
    })
  }

  handleRuleChange = (e, index, value) => {
    this.setState({
      ruleId: value
    })
  }

  render() {
    return (
      <div>
        <TextField
          floatingLabelText="Table Name"
          value={this.state.targetTableName}
          onChange={this.handleTextChange} 
        />
        <br />
        {
          this.props.viewer.version.columns.edges.map((edge) => edge.node).map((column) =>
            <div key={column.id}>
              <TextField
                id={column.id}
                floatingLabelText="Column"
                value={column.name}
                disabled={true}
                style={{ margin: 12 }} 
              />
              <SelectField
                floatingLabelText="Select a Rule"
                value={this.state.ruleId}
                onChange={this.handleRuleChange}
                style={{ margin: 12 }}
              >
                {
                  this.props.viewer.allRules.edges.map(edge => edge.node).map(rule =>
                    <MenuItem
                      key={rule.id}
                      value={rule.id}
                      primaryText={rule.name}
                    />
                  )
                }
              </SelectField>
            </div>
          )
        }

      </div>
    )
  }

}

export default Relay.createContainer(CreateTransformationSetDialog, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        ${CreateTransformationSetMutation.getFragment('viewer')}
        version(id: $modalEntityId) @include(if: $modalShow) {
          ${CreateTransformationSetMutation.getFragment('version')}
          id
          name
          columns(first: 100) {
            edges {
              node {
                id
                name
              }
            }
          }
        }
        allRules(first: 100) {
          edges {
            node {
              id
              name
            }
          }
        }
      }
    `
  },
  initialVariables: {
    modalEntityId: '',
    modalName: '',
    modalShow: true,
  },
  prepareVariables: ({ modalEntityId, modalName }) => {
    return {
      modalEntityId,
      modalName,
      modalShow: modalName === 'createTransformationSet'
    }
  }
})

It is using Relay but that isn't connected to the question, just need to extract the data from the inputs into the transformations array.

Answer 1

This can meet your requirement. Most of code will be understandable. feel free to ask for queries.

class CreateTransformationSetDialog extends React.Component {

  componentWillMount() {
    this.props.setOnDialog({
      onSubmit: this.onSubmit,
      title: 'Create and Apply Transformation Set'
    })
  }

  initial_state = {
    targetTableName: '',
    transformations: [];
    ruleId:'UnVsZTo1' //default values for all rules
  }

  state = this.initial_state

  onSubmit = () => {
    const onSuccess = (response) => {
      console.log(response)
      browserHistory.push('/table')
    }

    const onFailure = () => {}

    Relay.Store.commitUpdate(
      new CreateTransformationSetMutation(
        {
          viewer: this.props.viewer,
          version: this.props.viewer.version,
          targetTableName: this.state.targetTableName,
          transformations: this.state.transformations,
        }
      ),
      { onSuccess: onSuccess }
    )
  }

  handleTextChange = (e) => {
    this.setState({
      targetTableName: e.target.value
    })
  }

  handleRuleChange = (index, ruleId, columnId) => { //TODO: make use of index if needed
    let transformations = this.state.transformations;
    const isInStateWithIndex = transformations.findIndex((el) => el.columnId === columnId);
    if(isInStateWithIndex > -1){
      transformations[isInStateWithIndex].ruleId = ruleId; //changed rule
    }else{
      transformations.push({columnId: columnId, ruleId: ruleId}); //new column added to state.
    }
    this.setState({
      transformations: transformations
    }); //do with es6 spread operators to avoid immutability if any
  }

  render() {
    return (
      <div>
        <TextField
          floatingLabelText="Table Name"
          value={this.state.targetTableName}
          onChange={this.handleTextChange} 
        />
        <br />
        {
          this.props.viewer.version.columns.edges.map((edge) => edge.node).map((column) =>
            <div key={column.id}>
              <TextField
                id={column.id}
                floatingLabelText="Column"
                value={column.name}
                disabled={true}
                style={{ margin: 12 }} 
              />
              <SelectField
                floatingLabelText="Select a Rule"
                value={this.state.ruleId}
                onChange={(e, index, value) => this.handleRuleChange(index, value, column.id )}
                style={{ margin: 12 }}
              >
                {
                  this.props.viewer.allRules.edges.map(edge => edge.node).map(rule =>
                    <MenuItem
                      key={rule.id}
                      value={rule.id}
                      primaryText={rule.name}
                    />
                  )
                }
              </SelectField>
            </div>
          )
        }

      </div>
    )
  }

}

Maintaining the state for transformations in state with dynamically created columns.