Accessing nested array in Formik FieldArray

Question

**EDIT: Please check the updated sandbox, it incorporates some of the changes suggested in the below answer. **

I'm using Formik and its <FieldArray ../> component to handle some nested data to render inputs. I can't quite figure out what exact string to pass to the name prop in <FieldArray name={ // here}.

In my component I have a user selection that filters out some data and returns this array.

"chosenDevice": [
  {
    "deviceName": "eth0",
    "macAddress": "01:40:27:0F:2E:CB",
    "ipv4DHCP": false,
    "ipv4Addresses": [
      "182.148.1.100/24"
    ],
    "ipv4Gateway": "",
    "ipv6DHCP": false,
    "ipv6Addresses": [
      "232.232.2/100/10"
    ],
    "ipv6Gateway": ""
  }
]

I want to access the ipv4Addresses array. I'm either passing the wrong string to name or not using index in .map properly. Currently I have the following:

    <FieldArray
  name={`chosenDevice.ipv4Addresses[${index}]`}
>
  {({ remove, push }) => (
    <>
      <div>
        {values.chosenDevice.length > 0 &&
          values.chosenDevice.map(
            (ipv4Addresses, index) => (
              <div
                style={{
                  display: "flex"
                }}
                key={index}
              >
                <label
                  htmlFor={`chosenDevice[${index}].ipv4Addresses`}
                  className="custom-label"
                  style={{ flex: 1 }}
                >
                  ipv4Address(es)
                  <Field
                    className="custom-input"
                    name={`chosenDevice[${index}].ipv4Addresses`}
                    placeholder="< ipv4Address >"
                    type="text"
                  />
                </label>
                <ErrorMessage
                  name={`chosenDevice.${index}.ipv4Addresses`}
                  component="div"
                  className="field-error"
                />

I have a codesanbox that may provide some more context.

After looking into this further, basically I need to provide the string value of deviceName[0].ipv4Addresses[0], so I may need to rethink the .map and what it's actually returning.

simmer · Accepted Answer · 2020-09-22 20:31:48Z

4

With a .map inside of another .map, you might be getting index values confused. Try naming index something more specific to each .map (such as deviceIndex and addressIndex). I've used addressIndex for the inner map operation in my answer below.

It seems like your <FieldArray> here should only concern itself with the ipv4Addresses array on the current chosenDevice object.

Try this:

<FieldArray
  name="chosenDevice.ipv4Addresses"
>
  {({ remove, push }) => (
    <>
      <div>
        {chosenDevice.ipv4Addresses > 0 &&
          chosenDevice.ipv4Addresses.map(
            (ipv4Address, addressIndex) => (
              <div
                style={{
                  display: "flex"
                }}
                key={addressIndex}
              >
                <label
                  htmlFor={`chosenDevice.ipv4Addresses.${addressIndex}`}
                  className="custom-label"
                  style={{ flex: 1 }}
                >
                  ipv4Address(es)
                  <Field
                    className="custom-input"
                    name={`chosenDevice.ipv4Addresses.${addressIndex}`}
                    placeholder="< ipv4Address >"
                    type="text"
                  />
                </label>
                <ErrorMessage
                  name={`chosenDevice.ipv4Addresses.${addressIndex}`}
                  component="div"
                  className="field-error"
                />

But if I'm wrong about that, and the <FieldArray> tag does need to reference which chosenDevice it's a child of, this should do it:

<FieldArray
  name={`chosenDevice.${index}.ipv4Addresses`}
>
  {({ remove, push }) => (
    <>
      <div>
        {chosenDevice[index].ipv4Addresses > 0 &&
          chosenDevice[index].ipv4Addresses.map(
            (ipv4Address, addressIndex) => (
              <div
                style={{
                  display: "flex"
                }}
                key={addressIndex}
              >
                <label
                  htmlFor={`chosenDevice.${index}.ipv4Addresses.${addressIndex}`}
                  className="custom-label"
                  style={{ flex: 1 }}
                >
                  ipv4Address(es)
                  <Field
                    className="custom-input"
                    name={`chosenDevice.${index}.ipv4Addresses.${addressIndex}`}
                    placeholder="< ipv4Address >"
                    type="text"
                  />
                </label>
                <ErrorMessage
                  name={`chosenDevice.${index}.ipv4Addresses.${addressIndex}`}
                  component="div"
                  className="field-error"
                />

edited Sep 22, 2020 at 20:31

answered Sep 22, 2020 at 16:44

simmer

2,7181 gold badge19 silver badges25 bronze badges

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

5 Comments

simmer Over a year ago

@dj2 I've updated my answer just now with a few syntax corrections. Sorry about the initial errors.

DJ2 Over a year ago

I've tried both solutions in my codesandbox example and the field doesn't seem to render with the changes. Did you fork the sandbox by any chance?

DJ2 Over a year ago

The second solution, it's just pushing an empty string to the array without actually rendering another input box.

DJ2 Over a year ago

The map is working correctly because I added > 1 ipv4Address and it's display them in separate fields. So the remove(ipv4Index) may need to be changed

DJ2 Over a year ago

Any more thoughts on this?

Piyush Rana · Accepted Answer · 2020-10-05 05:58:24Z

1

<FieldArray name={`chosenDevice.ipv4Addresses[${index}]`}>

The index here if you are trying to use from the map below, then this is wrong you'll not get index outside the map.

Use this map above the FieldArray, like this:

values.chosenDevice.map((ipv4Addresses, index) => (
 <FieldArray
  name={`ipv4Addresses[${index}]`}
>
  {({ remove, push }) => (
    <>
      <div>
              <div
                style={{
                  display: "flex"
                }}
                key={index}
              >
                <label
                  htmlFor={`chosenDevice[${index}].ipv4Addresses`}
                  className="custom-label"
                  style={{ flex: 1 }}
                >
                  ipv4Address(es)
                  <Field
                    className="custom-input"
                    name={`chosenDevice[${index}].ipv4Addresses`}
                    placeholder="< ipv4Address >"
                    type="text"
                  />
                </label>
                <ErrorMessage
                  name={`chosenDevice.${index}.ipv4Addresses`}
                  component="div"
                  className="field-error"
                />)

answered Oct 5, 2020 at 5:58

Piyush Rana

6675 silver badges8 bronze badges

4 Comments

DJ2 Over a year ago

Trying these changes, I am not able to add additional fields for ipv4Addresses. Additionally, when there are 2+ addresses being read in, both the strings are in one input instead of two.

Piyush Rana Over a year ago

If you are saying so then I suggest you use state for accessing index outside map <FieldArray name={ipv4Addresses[${index}]}

DJ2 Over a year ago

I have updated the sandbox with your suggested changes codesandbox.io/s/network-config-wrlcz.

Piyush Rana Over a year ago

Tried using state?

Piyush Rana · Accepted Answer · 2020-10-05 14:09:57Z

1

  const [configIdx, setConfigIdx] = useState(0);

 <FieldArray
           name={`chosenDevice.ipv4Addresses[${configIdx}]`}
                                    >
                                      {({ remove, push }) => (
                                        <>
                                          <div>
                                            {values.chosenDevice.length > 0 &&
                                              values.chosenDevice.map(
                                                (ipv4Addresses, index) => {
                                                  setConfigIdx(index);
                                                  return (
                                                    <div
                                                      style={{
                                                        display: "flex"
                                                      }}
                                                      key={index}
                                                    >
                                                      <label

See how I updating state, this might help to achieve your result.

answered Oct 5, 2020 at 14:09

Piyush Rana

6675 silver badges8 bronze badges

4 Comments

DJ2 Over a year ago

Are you able to update the sandbox? I've tried several approaches with no success.

Piyush Rana Over a year ago

Yes but locally

DJ2 Over a year ago

Can you fork it and paste the link with your updates?

Piyush Rana Over a year ago

That I can't promise because my system is off now but you can copy above code and paste it appropriately

Collectives™ on Stack Overflow

Accessing nested array in Formik FieldArray

3 Answers 3

5 Comments

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related