title: How can i validate multiple array controller with select option in react js?
body: <p>I am doing simple an validation using react hook form but how can i take name after errors.name because i have an too complex name and i can't change that name cause of backend</p>
  <p><a href="https://codesandbox.io/s/react-multiple-validation-demo-91vig" rel="nofollow noreferrer">Here is an Code sandbox link of my example</a></p>
  <p>can anyone help me.</p>
  <p>Here is my code:-</p>
  <pre><code>const App = () =&gt; {
  const { control, handleSubmit, errors } = useForm();
  const [target, setTarget] = useState([0]);
  const addEmptyTargetFields = () =&gt; {
    setTarget((previousTarget: any) =&gt; [...previousTarget, target.length + 1]);
  };
  
  const removeTarget = (index: number) =&gt; {
    setTarget([...target.slice(0, index), ...target.slice(index + 1)]);
  };
  
  const onSubmit = () =&gt; {
    console.log(&quot;form submitted&quot;);
  };
  
  return (
    &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
      &lt;label&gt;Ice Cream Preference&lt;/label&gt;
      {target.map((e: any, i: number) =&gt; {
        return (
          &lt;div key={i}&gt;
            &lt;Controller
              as={Select}
              control={control}
              name={`mediationRuleTargetList[${i}].networkId`}
              placeholder=&quot;Bidder&quot;
              options={[
                { value: &quot;chocolate&quot;, label: &quot;Chocolate&quot; },
                { value: &quot;strawberry&quot;, label: &quot;Strawberry&quot; },
                { value: &quot;vanilla&quot;, label: &quot;Vanilla&quot; }
              ]}
              rule={{ required: true }}
            /&gt;
            {errors.mediationRuleTargetList[${i}].networkId &amp;&amp;
              errors.mediationRuleTargetList[${i}].networkId ===
                &quot;required&quot; &amp;&amp; &lt;span&gt;Bidders is required&lt;/span&gt;}
            &lt;Controller
              as={Select}
              control={control}
              name={`mediationRuleTargetList[${i}].ecpmLookBackPeriod`}
              placeholder=&quot;eCPM look back period&quot;
              options={[
                { value: &quot;chocolate&quot;, label: &quot;Chocolate&quot; },
                { value: &quot;strawberry&quot;, label: &quot;Strawberry&quot; },
                { value: &quot;vanilla&quot;, label: &quot;Vanilla&quot; }
              ]}
              rule={{ required: true }}
            /&gt;
            {errors.mediationRuleTargetList[${i}].ecpmLookBackPeriod &amp;&amp;
              errors.mediationRuleTargetList[${i}].ecpmLookBackPeriod.type ===
                &quot;required&quot; &amp;&amp; &lt;span&gt;Bidders is required&lt;/span&gt;}
            {i &gt; 0 &amp;&amp; &lt;button onClick={() =&gt; removeTarget(i)} /&gt;}
          &lt;/div&gt;
        );
      })}
      &lt;button onClick={() =&gt; addEmptyTargetFields()}&gt;Add More&lt;/button&gt;
      &lt;input type=&quot;submit&quot; /&gt;
    &lt;/form&gt;
   );
  };
  </code></pre>