New to React: Why is one array handled differently than another?

Question

I am working on a React application that transfers data from a Rails api. I am currently working on a form that includes a nested association (i.e. there are many model_b in model_a, and you can create them in the same form).

The problem I'm running into is that Rails expects a nested relationship with a specific naming convention and the same field that controls how this parameter is called when it is sent to rails also controls how React finds the right data, when the Rails API is responding.

This gets problematic on the edit page because I want to show model_a ( Retailers) the existing model_b ( SpendingThresholdsin this case), and when I change the 'name' field to fit the rails, React doesn’t know where to look for this data. When I try to pass data directly, it comes as another type of array, and some functions fail.

I think it’s easier to show than to say here so that

I originally had it

<FieldArray
  name="spending_thresholds"
  component={renderSpendingThresholds}
/>

and the data passed as

Object {_isFieldArray: true, forEach: function, get: function, getAll: function, insert: function…

for my React application from the Rails API, which worked, however, that the “name” does not refer to the Rails sympathy (Rails wants it to be called “expenses_thresholds_attributes” for it accepts_nested_attributesto work), so I changed it to

<FieldArray
  name="spending_thresholds_attributes"
  fields={this.props.retailer.spending_thresholds}
  component={renderSpendingThresholds}
/>

and start of data in a component renderSpendingThresholdsin this format

[Object]
  0:Object
  length:1
  __proto__:Array(0)

React - .

- , / , Rails, -?

renderSpendingThresholds

fields renderSpendingThresholds - , - , .

const renderSpendingThresholds = ({ fields }) => (
 <ul className="spending-thresholds">
    <li>
      <Button size="sm" color="secondary" onClick={(e) => {
          fields.push({});
          e.preventDefault();
        }
      }>
        Add Spending Threshold
      </Button>
    </li>
    {fields.map((spending_threshold, index) => (
      <li key={index}>
        <h4>Spending Threshold #{index + 1}</h4>
          <Button
            size="sm"
            color="danger"
            title="Remove Spending Threshold"
            onClick={() => fields.remove(index)}
          >
            Remove
          </Button>
        <Field
          name={`${spending_threshold}.spend_amount`}
          type="number"
          component={renderField}
          label="Spend Amount"
          placeholder="0"
        />
        <Field
          name={`${spending_threshold}.bonus_credits`}
          type="number"
          component={renderField}
          label="Bonus Credits"
          placeholder="0"
        />
      </li>
    ))}
  </ul>
);

Answer 1

, , fields renderSpendingThresholds . , redux-form render. . {field} - member spending_threshold. map spending_threshold. field member.fields - .

Answer 2

, , ?

submit?

, , , .

** :

onClick={() => fields.remove(index)}

...

this.setState({fields: FIELDS_WITHOUT_ITEM})

, , . .

class FormSpending extends Component {

    handleSubmit() {
        var fieldsData = this.state.fields.map(field => {
            return {
                whateverkey: field.dontcare,
                otherKey: field.anotherDontCare
            };
        });
        var formData = {
             fields: fieldsData
        };

        ajaxLibrary.post(URL_HERE, formData).....
    }

    render() {
        return (
            ...
            <form onSubmit={()=>this.handleSubmit()}>
            ...
            </form>
            ...
        ); 
    }
}