Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

185
Vistas
Formik FieldArray get values for calculations

I am using Formik with FieldArray, and passing values of Formik to another component for cross calculations,

But now the output of values are array, so how can I get access to those individual input items from an array?

import React, { useEffect } from "react";
import {TextField} from "@mui/material";

const CalculatedFieldForArray = props => {
  useEffect(() => {

    var tax = 0;

    var array = props.values.people
    
    console.log(props.values);

    array.map((out) => {

      if (out.price) {

        tax = out.price * out.country / 100;
      }
      //...Here I don't know how to assign value to FieldArray textfield
      props.setFieldValue("quantity", tax);
      
    })
    
    props.setFieldValue("quantity", tax);
  }, [props.values]);

 
  return (
    <TextField
      type="number"
      name="quantity"
      value={props.values.quantity}
    />
  );
};

export default CalculatedFieldForArray;

values which is passed by Formik is as below which shown in console, Want to access price and country value for each input and return calculation value.

{
    "people": [
        {
            "id": 0.8646983183745629,
            "price": "11",
            "country": "20"
        },
        {
            "id": 0.3192991708409705,
            "price": "110",
            "country": "18"
        }
    ],
    "quantity": 0
}
``
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda