CODEWITHSUNDEEP
reactjsreduxredux-form
PLee
PLee

Reputation: 453

Redux form field array cannot show the plain text value

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

Upvotes: 0

Views: 345

Answers (1)

Dario
Dario

Reputation: 6280

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} 
   ....

Upvotes: 3

Related Questions