title: how can I get the current value when I map an array in react
body: <p>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.</p>
  <pre><code>{DATA.map(({ title, fields }) =&gt; {
                setCurrentFields(fields.map((field) =&gt; field.name));
                //this above cause the error but I want find a way to save that part of the data somewhere
                return (
                  &lt;Step label={title} key={title}&gt;
                    &lt;Box
                      textAlign=&quot;center&quot;
                      p=&quot;3&quot;
                      overflowY=&quot;auto&quot;
                      height=&quot;100%&quot;
                    &gt;
                      {fields.map(
                        ({
                          name,
                          validation = { required: true },
                          placeholder,
                          type,
                        }) =&gt; {
                          console.log(fields.length);
                          return (
                            &lt;FormField key={name} errors={errors} name={name}&gt;
                              &lt;Input
                                id={name}
                                name={name}
                                placeholder={placeholder}
                                type={type}
                                {...register(name, validation)}
                              /&gt;
                            &lt;/FormField&gt;
                          );
                        }
                      )}
                    &lt;/Box&gt;
                  &lt;/Step&gt;
  </code></pre>