Redux form field array cannot show the plain text value

Question

I am using redux form to represent the data grid. The redux form is initialized using

  InputForm = connect(
  state => ({
    initialValues: {
      cashAndInvestments:[
        {title:"Chequing", rate:5, amount:100},
        {title:"Savings for Taxes", rate:4, amount:1000}
      ]
    } 
  }),
  null
)(InputForm);

It works well for the initialization part. Then I use the redux form fields array to render the table.

import React from 'react';
import { Field } from 'redux-form';
import { Table } from "semantic-ui-react";

const RenderAssets = ({ fields }) => (
  <Table.Body>
    {fields.map((asset, index) => (
      <Table.Row key={index}>
        <Table.Cell>
          {asset.title}
        </Table.Cell>
        <Table.Cell>
          <Field 
            name={`${asset}.rate`}
            type="tel" 
            component="input" 
          />
        </Table.Cell>
        <Table.Cell>
          <Field 
            name={`${asset}.amount`} 
            type="tel" 
            component="input" 
          />
        </Table.Cell>
      </Table.Row>
    ))} 
  </Table.Body>
);  

export default RenderAssets;

Rate and amount are populated correctly. However, it shows empty in the Table.Cell for asset title. I want to show asset title in plain text instead of a form field. Can anyone help me?

Thanks, Peter

Dario · Accepted Answer · 2019-05-13 08:33:29Z

3

If you want to access the value of a fieldArray item outside of a Field, you can use the 3rd parameter fields inside your map function (here you find the doc):

 {fields.map((asset, index, members) => (
    <Table.Row key={index}>
      <Table.Cell>
        {members.get(index).title} 
   ....

answered May 13, 2019 at 8:33

Dario

6,3109 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redux form field array cannot show the plain text value

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