Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

69
Views
Set a field based on another filed in Formik based on an Object

I have two input fields. I want to update one field based on another field and I am using Formik. When i type in address field it sets it into input state and calls handleChange and finds the pincode and logs it. But it is coming wrong as it is supposed to change whenever we type but it just sets the finds it for the first letter. Lets say for "h" 560102 and even though we type "hosurRoad" the pincode doesn't change. Also how do i update another field pincode with this value.

export const SignupForm = () => {
  const classes = useStyles();
  const [input, setInput] = useState("");

  const recoganizedAreas = {
    'hsr':'560102',
    'bypanahalli':'676667',
    'marathalli':'667776',
    'hosurRoad':'321236',
    'teachersColony':'560101'
  };
  
  useEffect(() => {
    const handleChange = () => {
      const foundArea = Object.keys(recoganizedAreas).find(key => key.includes(input))
  
      const foundPinCode = recoganizedAreas[foundArea] || "Not found";
      console.log(foundPinCode);
    }
  },[input]);
   
  
    
  return (
        <Container maxWidth="md">
          <div className={classes.formWrapper}>

            <Formik
              initialValues={{address:'',pincode:''}}
              onSubmit={values => {
                console.log(values);
              }}
            >
            {props => {
              const {
                values,
                handleChange,
                setFieldValue
              } = props;
              return (
                <Form>
                  <Grid container spacing={2}>
                      <Grid item xs={12}>
                        <Typography>
                          Your details
                        </Typography>
                      </Grid>

                      <Grid item xs={6}>
                        <Textfield
                          name="address"
                          label="Address"
                          value = {values.address}
                        />
                      </Grid>

                      <Grid item xs={6}>
                        <Textfield
                          name="pincode"
                          label="Pincode"
                          value={values.pincode}
                        />
                  {setInput(values.address)}
                      </Grid>
                      <Grid item xs={12}>
                        <Button>
                          Submit Form
                        </Button>
                      </Grid>
                  </Grid>
                </Form>
              )}}
            </Formik>

          </div>
        </Container>
  );
};
about 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!