how can I get the current value when I map an array in react

Question

I want to get the current value and save it in the state but I get too many renders... I'm mapping through data then I want to get render the UI based on that but also get the current data in the display so I can use it in another function in the same component.

{DATA.map(({ title, fields }) => {
              setCurrentFields(fields.map((field) => field.name));
              //this above cause the error but I want find a way to save that part of the data somewhere
              return (
                <Step label={title} key={title}>
                  <Box
                    textAlign="center"
                    p="3"
                    overflowY="auto"
                    height="100%"
                  >
                    {fields.map(
                      ({
                        name,
                        validation = { required: true },
                        placeholder,
                        type,
                      }) => {
                        console.log(fields.length);
                        return (
                          <FormField key={name} errors={errors} name={name}>
                            <Input
                              id={name}
                              name={name}
                              placeholder={placeholder}
                              type={type}
                              {...register(name, validation)}
                            />
                          </FormField>
                        );
                      }
                    )}
                  </Box>
                </Step>

why don't you do this inside of useEffect or where you fetch data? why are you trying to put this in a mapping function? — İlker
– İlker, Commented Apr 1, 2022 at 11:29
i want get why it doesn't work in the mapping function and I can't do it in useEffect cause I need the specific part of data — Bessem
– Bessem, Commented Apr 1, 2022 at 14:32
You can't set state inside the UI it will cause rerender and it will map again and it will cause rerender again — İlker
– İlker, Commented Apr 1, 2022 at 14:46
I don't understand how you can't do this inside useEffect. You have everything you need as "DATA". — İlker
– İlker, Commented Apr 1, 2022 at 14:46

Rodrigo Echeconea · Accepted Answer · 2022-04-01 15:26:26Z

1

You can't do state management inside a render because state update will trigger a rerender every time you update. What you should do is iterate this DATA array somewhere outside the render and update states there. Useeffect is probably what you are looking for.

Also, take into consideration that you are rewriting the state for each element on the data array, so in the end you will only have the state of the final element saved in you currentValues state.

answered Apr 1, 2022 at 15:26

Rodrigo Echeconea

1363 bronze badges

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

Collectives™ on Stack Overflow

how can I get the current value when I map an array in react

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